I have a navigation bar on the left hand side of my page, and I want it to stretch to 100% of the page height. Not just the height of the viewport, but including the areas hidden until you scroll. I don't want to use javascript to accomplish this.
Can it be done in HTML/CSS?
You can cheat using Faux Columns Or you can use some CSS trickery
It's simple using a table:
<html>
<head><title>100% Height test</title></head>
<body>
<table style="float: left; height: 100%; width: 200px; border: 1px solid red">
<tbody><tr><td>Nav area</td></tr></tbody>
</table>
<div style="border: 1px solid green;">Content blabla...
text<br />
text<br />
text<br />
text<br />
</div>
</body>
</html>
When DIV was introduced, people were so afraid of tables that the poor DIV became the metaphorical hammer.
Use position absolute. Note that this isn't how we are generally used to using position absolute which requires manually laying things out or having floating dialogs. This will automatically stretch when you resize the window or the content. I believe that this requires standards mode but will work in IE6 and above.
Just replace the div with id 'thecontent' with your content (the specified height there is just for illustration, you don't have to specify a height on the actual content.
<div style="position: relative; width: 100%;">
<div style="position: absolute; left: 0px; right: 33%; bottom: 0px; top: 0px; background-color: blue; width: 33%;" id="navbar">nav bar</div>
<div style="position: relative; left: 33%; width: 66%; background-color: yellow;" id="content">
<div style="height: 10000px;" id="thecontent"></div>
</div>
</div>
The way that this works is that the outer div acts as a reference point for the nav bar. The outer div is stretched out by the content of the 'content' div. The nav bar uses absolute positioning to stretch itself out to the height of its parent. For the horizontal alignment we make the content div offset itself by the same width of the navbar.
This is made much easier with CSS3 flex box model, but that's not available in IE yet and has some of it's own quirks.