Here is the HTML Code:
<div id="header">
</div>
<div id="container">
<div id="leftbar">
</div>
<div id="content">
</div>
</div>
<div id="footer">
</div>
And here is what I want to achieved, even though it's not valid CSS, but I think you will understand my point:
html,body
{
min-width:800px;
max-width:1680px;
width:100%;
height:100%
}
#header
{
width:100%;
height:100px;
background:#CCCCCC url(images/header_bg.gif) repeat-x;
}
#footer
{
width:100%;
height:10px;
}
#container
{
width:100%;
height:100%-100px-10px; /* I want #container to take all the screen height left */
}
#leftbar /*fixed width, the height is always the same as the screen height*/
{
height:100%;
width:200px;
}
#content
{
height:100%;
width:100%-200px; /* take all the screen width left except the leftbar */
overflow:auto;
}
Someone just put this as an example: http://limpid.nl/lab/css/fixed/header-and-footer
Actually, I don't think using <body>padding to exclude the header and footer out is a good way to go, because I would like all the scroll bars appear inside the div#content, not for the whole <body> tag. I don't know if I explain my problem clearly. Thanks!