Forum Moderators: not2easy
what is the solution to make the lower div stretch down to fill up the rest of the page?
Using xhtml transitional or strict and hopefully not using tables. Can someone explain?
I've tried searching for about 2 hrs through other topics and can not seem to get a working solution.
If you put the "600px" div inside the "100%" div, you'll get what you're asking for. "100%" is 100% of the parent element or the viewport, whichever comes first. By stacking the divs on top of each other, you will get a total height of 100% + 600px. By nesting them, the "brown" div will take up 100% of the viewport, just as you want, and also reducing the viewable area with 600px due to the child div taking up that space.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</head>
<body>
<div style="height: 100%; background-color: brown;">
<div style="width: 800px; height: 600px; background-color: green;"></div>
</div>
</body>
</html>
html { height: 100%; }
body { height: 100%; }
