CSS: Tell block element to fill in height

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?

Apparently, CSS has massive troubles finding heights. Widths, no worries.

Using Javascript, you'd go:

//Grab div element
var obj = document.getElementById('theDiv');

//Enable sizing
obj.style.position = 'relative';

//Force to window
obj.style.height = document.documentElement.clientHeight+'px';

Incidentally, in your Fiddle, the plaintext node above the div is offsetting the div below. It's finding 100% of the body height, but then being bumped down, causing the scrollbar. The way to fix this in CSS is position:absolute;left:0;top:0 which locks it in place.

Also note that in any of these cases, if you do end up scrolling (e.g. to 150%), you'll see the bottom edge of your div down there at 100%.

You've hit the css box model problem. A quick and dirty solution is to set the overflow: hidden property to prevent the scrollbars but you should be very careful doing this. You will need to make sure your content fits on screen as any content extending beyond the block element will be inaccessible to users.

This is how you can do it using a table (It's pure CSS):

http://vidasp.net/tinydemos/table-layout.html