height 100% in div does not work

Question

height 100% in div does not work

Navigation

#1 by (2 votes)

-1

I've tried everything but my height: 100% does not work what should I do?

html,
body {
  margin: 0px;
  height: 100 %;
}
.margin - site {
  width: 615px;
  margin: 47px auto;
  background - color: #fff;
  padding: 10px;
  word - wrap: break -word;
  border - radius: 3px;
  display: table;
}
.margin - right {
  width: 255px;
  height: 100 %;
  float: right;
  height: -webkit - calc(100 % -100px);
  height: -moz - calc(100 % -100px);
  height: calc(100 % -100px);
}

<div class="margin-site">
  <div class="margin-right">
    conteudo right
  </div>
  conteudo site
</div>

html css

asked by anonymous 22.01.2017 / 08:43

1 answer

Create POJO for JSON Display certain image for milled numbers

score 2 · Answer 1

For a child element, in which case margin-right , use height:100% the parent element, in this case margin-site , must also have height:100%;

Due to height: calc(100% - 100px); element margin-right is height of 100%-100px and parent element, margin-site also has padding:10px , so child element does not occupy all height of parent element

    html, body {
    margin:0px;
    height:100%;
    }
.margin-site {
    width: 615px;
    height:100%;
    margin: 47px auto;
    background-color: red;
    padding: 10px;
    word-wrap: break-word;
    border-radius: 3px;
    display: table;
}
    .margin-right {
        width: 255px;
        height: 100%;
        float: right;
        height: -webkit-calc(100% - 100px);
        height: -moz-calc(100% - 100px);
        height: calc(100% - 100px);
        background:green;
    }

<div class="margin-site">
<div class="margin-right">
conteudo right
</div>
conteudo site
</div>

I put the red and green background to make it visible that the margin-right element is in proper height.