2

I have a div with the class .app, which has the following css rules: 

.app {
    width: 960px;
    margin: 40px auto 0 auto;
    background: #fff;
    min-height: 100%;
    z-index: 1;
}

The min-height was working as expected, getting the app div to fill the screen even if it was empty - this is because the content is loaded via ajax and I want the div to reach to the bottom of the screen even before the content is loaded.

However, I'd previously forgotten to add <!DOCTYPE html> to my document, and now that that's corrected, the height rule no longer works. The doctype has to be there, both because it's required and to solve a jQuery issue I was having.

Why is the doctype messing with my css? Or, possibly more to the point, why was it working beforehand?

Community
  • 1
  • 1
Sinister Beard
  • 3,570
  • 12
  • 59
  • 95

2 Answers2

4

When you remove the doctype the browser goes into quirks mode which does things differently to help older code that is not validated to render correctly.

Because ancient browsers had odd, inconsistent behavior and browsers treat Doctypes like an intelligence test to see if the author is writing code to the standards or to what they learned from W3Schools a decade ago.

If you have height: 100% and the height of the parent element is auto then 100% means auto.

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.

html, body {
    margin: 0;
    padding: 0;
    border: none;
    height: 100%;
}

#mydiv {
    height: 100%;
}
Darren Willows
  • 2,053
  • 14
  • 21
  • 1
    Well, your history in your second paragraph is not quite correct, and has more to do with Microsoft's failings in IE, so I'll refer you to this: https://hsivonen.fi/doctype/ – Rob Oct 19 '15 at 14:37
0

You could also use the vh unit, dependant on which browsers you need to support. So:

#mydiv {
    min-height: 100vh
}
Mike Harrison
  • 1,020
  • 2
  • 15
  • 42