100% height on div does not work

Asked

Viewed 632 times

-1

I’ve tried everything but my height:100% does not work what I should 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

  • Face Check the html so we can examine it better? Sure you stated html and the body 100% height, but this class .margin-right Is she the son of any father? If so, this father must also be declared to be 100%.

  • @Thomsontorvalds is son yes, I updated the post with html

  • @Thomsontorvalds I tried to put height:100%; no father also in the case . margin-site and did not work. :/

1 answer

2

For a child element, in your case margin-right, utilise height:100% the parent element in their case margin-site, must also possess height:100%;

Because of height: calc(100% - 100px); the element margin-right is with height of 100%-100px and the parent element, margin-site also has padding:10px, so the child element does not occupy the whole height of the 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 be visible that the element margin-right is with appropriate height.

  • thanks for the help, but it’s still not working and I did everything as you did. So much that here in the example also did not work :/

  • It did work, it turns out that in the example of height:100% of the body corresponds to 203px. His element margin-right has a height of 100%-100px, and its parent element margin-site has a padding:10px totalling 20px height, making the calculations 203-100-20 exact totalization 83px which exactly corresponds to height of the element margin-right

  • If you withdraw margin:47px auto; and padding:10px; of the element margin-site, and withdraw height: calc(100% - 100px); of the element margin-right, you will see that the two elements fill the screen, for example: https://jsfiddle.net/leonardorodrigues/f8dL92up/

  • I can’t remove the margin: auto; because I need the centered box, and even if the problem continues, can the problem be in my css? I have another box site that 100% height works perfectly

  • No need to withdraw margin, I told you that if you withdraw it would be easier to realize that height:100% was working. You are getting a little confused and it makes it difficult to help you, height:100% is working perfectly in the 2 examples I gave you, it happens that height: calc(100% - 100px); define that the element will subtract 100px the maximum size available for height. SEE: https://jsfiddle.net/leonardorodrigues/f8dL92up/1/. O margin-right is taking the maximum size available for height

  • I understood. I put how it was on my fiddle site and it worked, but the site doesn’t work. There must be something else that’s keeping this from working.

Show 1 more comment

Browser other questions tagged html css

You are not signed in. Login or sign up in order to post.