Quick tip: Full-height (height 100%) page in XHTML strict 1.0
This may be counter-intuitive (like most of the XHTML spec and how it’s implemented), but everything, even the element is treated like an element, and therefore makes it a pain in the arse to make anything height: 100%.
Long story short, if you have a div on your page, and you want it to fill the full vertical height of the screen, the portable way to do that is to do the following:
HTML:
<html>
<head>
<title>Full height</title>
</head>
<body>
<div id=’pageWrapper’>
Those-who-can, do; those-who-can’t write a standard then don’t support it so that those-who-can have to waste their time hacking around these mistakes. This way, those-who-can’t don’t look as bad next to those-who-can’s now more mundane accomplishments.
</div>
</body>
</html>
CSS:
html{
height:100%; /* means 100% of the client window */
}
body{
height: 100%; /* means 100% of the ‘html’ element */
}
#pageWrapper{
height: 100%; /* means 100% of the ‘body’ element… fuckssake*/
display:table;
}
There you have it. You might want to remove my vulgar op-ed comment before putting that in production code. Enjoi.
Add comment December 9th, 2007