div tag & 100% height
Posted on 2004-08-26
"simple" question: how do I get content to fill the remaining 100% height of a page and have scrollbars?
I'm trying to get a layout to look like it's in a frameset, but I don't want to use frames...ie I want the top half of the layout to stay where it is on the screen and I want the bottom half (well the bottom-right actually) to have scrollbars attached to it...and I don't want to use iframes.
I've been trying to get it to work with div tags, no luck in any DTD. And I can't get tables to show scrollbars in TD cells.
anyway, this should hopefully explain it a bit better:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 4.0 Transitional//EN">
<div style="height:100%;border:1px solid #000000;">sample dummy data<br />.<br />.<br />.<br />.<br />
<div style="height:100%;border:1px solid #000000;overflow:auto;">I want this div to extend to the bottom of the window and only create scrollbars in itself, not the body or html elements nor it's parent div. And just saying "overflow:hidden" in the body or html isn't an option cause then the content is lost :-)</div>