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

css, html, quirks-mode

Solution

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>

This wouldn't work, if I didn't give 100% `height` to—say `html` element:

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>

… or `.inner`

html, body, .outer, .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>

Problem

I am working on getting the layout sorted for a pretty simple gallery webapp, but when I use an HTML5 doctype declaration, the height of some of my divs (which were 100%) get shrunk right down, and I can't seem to plump them back up using CSS. My HTML is at https://dl.dropbox.com/u/16178847/eyewitness/b/index.html and css is at https://dl.dropbox.com/u/16178847/eyewitness/b/style.css - If I remove the HTML5 doctype declaration, all is as I want it to be, but I really want to use the proper HTML5 doctype declaration. - If I set the doctype to HTML5 and make no changes, the div with the photo and the footer divs are not visible, presumably because they are 0px high. - If I set the doctype to HTML5 and make the `body { height: 100px }` and `.container { height: 100px }` or `.container { height: 100% }`, it becomes visible, but what I need is it to be is full height rather than a height in pixels. - If I try to do the same as above, but with the `body { height: 100% }` the photo and footer divs are not visible again. What do I need to do to get it 100% in height so that my photo and footer divs are full height?

Original source

Related problems