33

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?

Grezzo
  • 2,220
  • 2
  • 22
  • 39
  • 1
    This has nothing to do with HTML5 or CSS3. (What happens with any other doctype? Since when was `height` a new CSS3 thing?) – BoltClock Jun 03 '12 at 16:17
  • 1
    When you make the body 100% height, what are you expecting it to be 100% of? – robertc Jun 03 '12 at 16:27
  • @BoltClock 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? – Grezzo Jun 03 '12 at 16:28
  • @robertc 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. – Grezzo Jun 03 '12 at 16:29
  • Here's an explanation of the DOCTYPE issue: http://stackoverflow.com/a/32215263/3597276 – Michael Benjamin Aug 25 '15 at 23:13
  • Here's an explanation of the CSS `height` property with percentage values: http://stackoverflow.com/questions/31728022/why-is-the-height-property-with-percentage-value-not-working-on-my-div/31728799#31728799 – Michael Benjamin Aug 25 '15 at 23:14

3 Answers3

41

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>
yunzen
  • 32,854
  • 11
  • 73
  • 106
  • 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)? – Grezzo Jun 03 '12 at 16:36
  • 4
    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. – yunzen Jun 03 '12 at 16:39
  • 1
    That is exactly the solution, I had no idea you could apply CSS to the html element. Nice one! – Grezzo Jun 03 '12 at 16:52
7

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>
barraq
  • 326
  • 2
  • 7
2

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

Karlth
  • 3,267
  • 2
  • 27
  • 28
Nicholas Fernandes Paolillo
  • 941
  • 9
  • 20
  • When viewport units is used, one doesn't need to set any height to any other element, in this case the `body`. – Asons Dec 29 '18 at 21:31
  • In my case ag-grid was not taking height in `%` so applied height in `vh`, super and simple. Here is working `` . That is not relevant but helpful for me. – SUDARSHAN BHALERAO Jun 26 '19 at 11:33
  • 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. – Nicholas Fernandes Paolillo Jun 28 '19 at 19:20