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

Question

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?

Stope

This has nothing to do with HTML5 or CSS3. (What happens with any other doctype? Since when was height a new CSS3 thing?) – Rash

When you make the body 100% height, what are you expecting it to be 100% of? – Alicyclic

@Rash Thanks for your comment. That's a fair point about CSS3, I have removed that tag. I haven't tried any other doctypes, I have only tried it with no doctype or the HTML5 doctype. What are you hoping to figure out from the behaviour with other doctype declarations? I am more than happy to try a few and report back, but am unsure which ones would be relevant to try? – Stope

@Alicyclic I was expecting it to be 100% of the viewport, presumably that is not how it works, but I don't know how to get that effect any other way. – Stope

Here's an explanation of the DOCTYPE issue: https://mcmap.net/q/37037/-why-does-height-100-work-when-doctype-is-removed – Sherburn

Here's an explanation of the CSS height property with percentage values: #31728522 – Sherburn

Answer 1

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>

Aniela

So are you saying that (in standards mode) there is no way of making a page the same height as the viewport (without using javascript to set a height in units rather than percentage)? – Stope

I'k saying you can. Give html element 100% height, give body element 100% height and so on with every child element of the body and the child elements of that element until you reach the element that you want to be 100% in the first place. – Aniela

That is exactly the solution, I had no idea you could apply CSS to the html element. Nice one! – Stope

Answer 2

Indeed, to make it work do as follow:

<!DOCTYPE html>
<html>
<head>
  <title>Vertical Scrolling Demo</title>
  <style>
    html, body {
      width: 100%;
      height: 100%;
      background: white;
      margin:0;
      padding:0;
    }
    .page {
      min-height: 100%;
      width: 100%;
    }
  </style>
</head>
<body>
  <div id="nav" class="page">
    <ul>
      <li><a href="#about">About</a></li>
      <li><a href="#portfolio">Portfolio</a></li>
      <li><a href="#contact">Contact</a></li>
    </ul>
  </div>
  <div id="page1" class="page">
    <h1><a name="about">about</a></h1>
    About page content goes here.
  </div>
  <div id="page2" class="page">
    <h1><a name="portfolio">portfolio</a></h1>
    Portfolio page content goes here.
  </div>
  <div id="page3" class="page">
    <h1><a name="contact">contact</a></h1>
    Contact page content goes here.
  </div>
</body>
</html>

Kwang

Answer 3

I got stuck into a similar problema to size a canvas, so here is what i did and worked perfectly.

Besides doing the:

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

Set the desired element like this:

.desired-element{ width: 100vw; height: 100vh}

In that way you are assured to have 100% of the view port in width and height. vw stands for viewwidth and vh stands for viewheight

I hope this helps someone

Ioyal

When viewport units is used, one doesn't need to set any height to any other element, in this case the body. – Jagatai

In my case ag-grid was not taking height in % so applied height in vh, super and simple. Here is working <ag-grid-angular style="width: 100%; height: 76vh;"></ag-grid-angular> . That is not relevant but helpful for me. – Handling

Hello, good to know it helped you somehow, sorry for the bad answer, I am trying my best. Since this answer, I have gained more experience in Canvas positioning and got some best practices. Always set the canvas as {position: absolute} and throw it behind everything else with z-index if you want it to be your background. – Ioyal