This seems like it should be the easiest thing in the world, but I’m having difficulties. I’m started to think I didn’t know as much about CSS as I thought, or CSS was designed more poorly than I thought.
I have a page. At the top, there’s an arbitrary amount of markup. Then there’s a block element. All I want to do is make this block element extend its height to the bottom of the window.
See http://jsfiddle.net/vHVeC/4/. It’s close, but the last block element extends beyond the visible area of the browser, creating scrollbars. No content should extend beyond the dimensions of the viewport (ie there should be no scrollbars).
How can I do this with having to use JavaScript?
This is how you can do it using a table (It’s pure CSS):
http://vidasp.net/tinydemos/table-layout.html