div height calc(100% - 50px) not working

Question

https://codepen.io/joshuajazleung/pen/EbbgBN

<div class="outer">
  <div class="inner">
    <img src="https://placehold.it/300x200" alt="">
    <div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Optio animi harum impedit ex esse labore, placeat, tempore sapiente nisi cupiditate fugiat soluta ullam dicta ducimus accusamus tenetur consequuntur nesciunt earum!</div>
  </div>
</div>

.outer {
  background: red;
  position: relative;
  height: calc(100% - 60px);
}

.inner {
  position: relative;
  top: -100px;
}

since .inner is moved to top a little bit, to reduce .outer overall space, I use

height: calc(100% - 50px); // my logic is that it's div's height minus 50px

But it's not working, wondering why?

You are required to post your markup here, not a codepen. [mcve] — Rob, Nov 17 '17 at 01:03

score 10 · Answer 1 · answered Nov 17 '17 at 01:05

10

.outer {
  background: red;
  position: relative;
  height: calc(100vh - 50px);
}

Try to change 100% => 100vh

answered Nov 17 '17 at 01:05

kyun

9,710
9
31
66

score 3 · Answer 2 · answered Nov 17 '17 at 01:09

This won't work because the html and body elements don't span the full height by default. You're then setting a height: calc(100% - 50px); of something inside of that... To simplify it, just set height: 100% and you'll notice it isn't doing what you want.

You could set the height on the body and html to 100% as well, or you could try using 100vh instead of 100%.

score 0 · Answer 3 · answered Nov 17 '17 at 01:14

Not really clear what you are after, but if you use a height setting which contains percentage values, the parent element of that element needs to have a defined height definition in order have a reference for the percentage amount. In your case, that's the body, whose parent again is the html element, so you should add this CSS:

html, body {
  height: 100%;
}

https://codepen.io/anon/pen/XzzNbN

div height calc(100% - 50px) not working

3 Answers3