I'm having difficulty getting a 100% page height including contained divs. What seems to happen is that the inner div expands to 100% the height of the entire parent element, and not just to the bottom, even if it's been displaced by an element above it, so the child overflows the parent.
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Home</title>
<style type="text/css">
html, body, #container, #content
{
height: 100%;
min-height: 100%;
}
html { border: 1px solid red; }
#content { border: 1px solid blue; }
</style>
</head>
<body>
<div id="container">
<h2>Test</h2>
<div id="content">
<p>Testing</p>
</div>
</div>
</body>
</html>
I'm beginning to believe that simply this is simply the correct behaviour and just doesn't work, but I figured I'd ask the collective intelligence first before overhauling the approach.