Menu
UPDATE: I think there was too many information. Here's my question: how to make the height of #middle 100% of the remaining space in the following exampl:
<body>
<div id="big">
<div id="header"></div>
<div id="middle"></div>
<div id="btm"></div>
</div>
</body>
height of #big, body, html is all 100%.
Height of header and bottom are 120px;
319
Update: Changed my example to match your updated question
Here's a working example of your layout. Tested in IE8, IE7, Firefox, and Chrome.
The key here is NOT to set this height of middle to 100%. Instead, you position it absolutely, with top and bottom equal to the height of your header and btm elements (in your case, 120px).
If you set the height of the middle element to 100%, it will be the same height as the big element, which is 100% of the body tag, and hence your middle element will be too large, causing horizontal scroll bars.
<!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">
<head>
<title></title>
<style type="text/css">
html
{
height: 100%;
}
body
{
background-color: #EEEEEE;
height: 100%;
padding: 0;
margin: 0;
}
#big
{
width: 100%;
height: 100%;
}
#header
{
width: 100%;
background-color: #DDD;
height: 120px;
}
#btm
{
width: 100%;
height: 120px;
position: absolute;
bottom: 0px;
background-color: #999;
}
#middle
{
width: 100%;
position: absolute;
top: 120px;
bottom: 120px;
}
</style>
</head>
<body>
<div id="big">
<div id="header">
header
</div>
<div id="middle">
middle
</div>
<div id="btm">
bottom
</div>
</div>
</body>
</html>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
