Why doesn’t height: 100% work to expand divs to the screen height?

Total
0
Shares

I want the carousel DIV (s7) to expand to the height of the entire screen. I haven’t an idea as to why it’s not succeeding. To see the page you can go here.

_x000D_

_x000D_

body {_x000D_
  height: 100%;_x000D_
  color: #FFF;_x000D_
  font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;_x000D_
  background: #222 url('') no-repeat center center fixed;_x000D_
  overflow: hidden;_x000D_
  background-size: cover;_x000D_
  margin: 0;_x000D_
  padding: 0;_x000D_
}_x000D_
.holder {_x000D_
  height: 100%;_x000D_
  margin: auto;_x000D_
}_x000D_
#s7 {_x000D_
  width: 100%;_x000D_
  height: 100%: margin: auto;_x000D_
  overflow: hidden;_x000D_
  z-index: 1;_x000D_
}_x000D_
#s7 #posts {_x000D_
  width: 100%;_x000D_
  min-height: 100%;_x000D_
  color: #FFF;_x000D_
  font-size: 13px;_x000D_
  text-align: left;_x000D_
  line-height: 16px;_x000D_
  margin: auto;_x000D_
  background: #AAA;_x000D_
}

_x000D_

<div class="nav">_x000D_
  <a class="prev2" id="prev2" href="#">_x000D_
    <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">_x000D_
  </a>_x000D_
  <a class="next2" id="next2" href="#">_x000D_
    <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">_x000D_
  </a>_x000D_
</div>_x000D_
_x000D_
<div class="holder">_x000D_
  <tr>_x000D_
    <td>_x000D_
      <div id="s7">_x000D_
        {block:Posts}_x000D_
        <div id="posts">

_x000D_

_x000D_

_x000D_


Solution

In order for a percentage value to work for height, the parent’s height must be determined. The only exception is the root element <html>, which can be a percentage height. .

So, you’ve given all of your elements height, except for the <html>, so what you should do is add this:

html {
    height: 100%;
}

And your code should work fine.

_x000D_

_x000D_

* { padding: 0; margin: 0; }_x000D_
html, body, #fullheight {_x000D_
    min-height: 100% !important;_x000D_
    height: 100%;_x000D_
}_x000D_
#fullheight {_x000D_
    width: 250px;_x000D_
    background: blue;_x000D_
}

_x000D_

<div id=fullheight>_x000D_
  Lorem Ipsum        _x000D_
</div>

_x000D_

_x000D_

_x000D_

JsFiddle example.

Source: StackOverflow.com

Leave a Reply

Your email address will not be published. Required fields are marked *