Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

Tags:

html

css

height

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.

body {    height: 100%;    color: #FFF;    font: normal 28px/28px'HelveticaWorldRegular', Helvetica, Arial, Sans-Serif;    background: #222 url('') no-repeat center center fixed;    overflow: hidden;    background-size: cover;    margin: 0;    padding: 0;  }  .holder {    height: 100%;    margin: auto;  }  #s7 {    width: 100%;    height: 100%: margin: auto;    overflow: hidden;    z-index: 1;  }  #s7 #posts {    width: 100%;    min-height: 100%;    color: #FFF;    font-size: 13px;    text-align: left;    line-height: 16px;    margin: auto;    background: #AAA;  }
<div class="nav">    <a class="prev2" id="prev2" href="#">      <img src="http://static.tumblr.com/ux4v5bf/ASslogxz4/left.png">    </a>    <a class="next2" id="next2" href="#">      <img src="http://static.tumblr.com/ux4v5bf/swslogxmg/right.png">    </a>  </div>    <div class="holder">    <tr>      <td>        <div id="s7">          {block:Posts}          <div id="posts">
like image 416
Earl Larson Avatar asked Aug 13 '11 10:08

Earl Larson


People also ask

Why is height 100% not working HTML?

Setting min-height to 100% on both elements does not allow the body element to fill the page like you might expect. If you check the computed style values in dev tools, the body element has a height of zero. Meanwhile, the HTML element has a height equal to the visible part of the page in the browser.


2 Answers

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.

* { padding: 0; margin: 0; }  html, body, #fullheight {      min-height: 100% !important;      height: 100%;  }  #fullheight {      width: 250px;      background: blue;  }
<div id=fullheight>    Lorem Ipsum          </div>

JsFiddle example.

like image 86
Madara's Ghost Avatar answered Dec 04 '22 19:12

Madara's Ghost


Since nobody has mentioned this..

Modern Approach:

As an alternative to setting both the html/body element's heights to 100%, you could also use viewport-percentage lengths:

5.1.2. Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units

The viewport-percentage lengths are relative to the size of the initial containing block. When the height or width of the initial containing block is changed, they are scaled accordingly.

In this instance, you could use the value 100vh (which is the height of the viewport) - (example)

body {     height: 100vh; } 

Setting a min-height also works. (example)

body {     min-height: 100vh; } 

These units are supported in most modern browsers - support can be found here.

like image 21
Josh Crozier Avatar answered Dec 04 '22 19:12

Josh Crozier