Html5 Page 100% Height Issue

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

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>

Why can't I make my div 100% height if I use an HTML5 doctype? How do I get it 100% height

Only if the parent element has a defined height, i..e not a value of auto. If that has 100% height, the parent's parent height must be defined, too. This could go until to the html root element.

So set the height of the html and the body element to 100%, as well as every single ancestor element of that element that you wish to have the 100% height in the first place.

See this example, to make it clearer:

html, body, .outer, .inner, .content {  height: 100%;  padding: 10px;  margin: 0;  background-color: rgba(255,0,0,.1);  box-sizing: border-box;}

<div class="outer">  <div class="inner">    <div class="content">      Content    </div>  </div></div>

Make body have 100% of the browser height

Try setting the height of the html element to 100% as well.

html, 
body {
    height: 100%;
}

Body looks to its parent (HTML) for how to scale the dynamic property, so the HTML element needs to have its height set as well.

However the content of body will probably need to change dynamically.
Setting min-height to 100% will accomplish this goal.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

body height not filling 100% page height

Looks like you have float:left applied on your children. Use this code :

html, body {
    overflow: auto;
}

100% height not working due to DOCTYPE in HTML5 ASP.net

I think I understand what you're asking, but I'm not completely sure, nor am I sure where the DOCTYPE, anchors or ASP.NET come into play.

Here's a demo of a full page document, with a few full screen child divs.

html,
body {
  height: 100%;
  width: 100%;
}

body {
  overflow: auto;
}

div {
  width: 100%;
  height: 100%;
}

Please keep in mind that percentage heights can become a headache really fast, so you need to understand exactly what you are doing.

Also note, this page is running Normalize.css which fixes browser discrepancies.

100% height and weird issues

Your class, uslt-content, inherits 100% of the height of <HTML> element, which has the viewport height. So .uslt-wrapper gets overflowed.

One of the possible solutions — let the header and the footer to overlap above the content (jsFiddle Demo):

.uslt-content {
    background-color:#00f;
    height:100%;
    margin: -68px auto;
    width:90%;
}

.uslt-footer, .uslt-header {
    background-color:#24427c;
    height:68px;
    width:100%;
    position: relative;
    z-index: 1;
}

Modern way to markup 100% height layout in HTML5 and CSS3

Well, first of all in 2011 we dont use tables for layout anymore!

If I were you, I would write the markup like so:

<body>
   <div id="main" role="main">
        <header>
            contains logo, nav and has fixed height
        </header>
        <div class="content"> /*use <article> or <section> if it is appropriate - if not sure what to use, use a div*/
            actual content
        </div>
        <footer>
            fixed size footer
        </footer>
    </div>
</body>

And the CSS would be the same except the changed selectors

html, body { height:100% }
#main { height:100% }
footer { height:123px }

For a fixed footer, I would suggest to use position:absolute or maybe position:fixed - it depends how you want it to behave (scroll with page or always stay at bottom).

To make a "sticky" footer, that will be at the bottom of the page but move with the content, this method will do the trick.