B
Brian Henry
I am trying to create a page with a header, footer, a document body, and a
left navigation plain.. I want the page to fill by default to the browsers
max size if the content of the documentbody do not fill it already instead
of having blank space at the bottom of the page below the footer. The code I
have now is the following
HTML CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">header</div>
<div class="leftbar">leftbar</div>
<div class="documentbody">document body</div>
<div class="footer">footer</div>
</body>
</html>
CSS CODE
..header
{
border-bottom: dimgray 1px solid;
height: 45px;
background-color: #669999;
}
..leftbar
{
float: left;
width: 180px;
background-color: #cccc66;
}
..documentbody
{
background-color: white;
}
..footer
{
clear:both;
border-top: dimgray 1px solid;
background-color: #cc66cc;
}
body
{
margin: 0px;
background-color: #ffffcc;
}
now, when you do that now (ignore the colors, they are there just so i can
tell where the regions are currently filling visually)
right now this looks like this:
http://www.neowin.net/forum/index.php?act=Attach&type=post&id=116371
I want it to look like this:
http://www.neowin.net/forum/index.php?act=Attach&type=post&id=116372
(just a quick rendering in photoshop, haven't figured it out myself yet)
so as you can see i want it when the contents of the document body do not
fill the page, it still extends the body to fill the browser, but not past
the size of the browser. I don't want that blank space at the end after the
footer like in the first picture.
Thanks!
left navigation plain.. I want the page to fill by default to the browsers
max size if the content of the documentbody do not fill it already instead
of having blank space at the bottom of the page below the footer. The code I
have now is the following
HTML CODE
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div class="header">header</div>
<div class="leftbar">leftbar</div>
<div class="documentbody">document body</div>
<div class="footer">footer</div>
</body>
</html>
CSS CODE
..header
{
border-bottom: dimgray 1px solid;
height: 45px;
background-color: #669999;
}
..leftbar
{
float: left;
width: 180px;
background-color: #cccc66;
}
..documentbody
{
background-color: white;
}
..footer
{
clear:both;
border-top: dimgray 1px solid;
background-color: #cc66cc;
}
body
{
margin: 0px;
background-color: #ffffcc;
}
now, when you do that now (ignore the colors, they are there just so i can
tell where the regions are currently filling visually)
right now this looks like this:
http://www.neowin.net/forum/index.php?act=Attach&type=post&id=116371
I want it to look like this:
http://www.neowin.net/forum/index.php?act=Attach&type=post&id=116372
(just a quick rendering in photoshop, haven't figured it out myself yet)
so as you can see i want it when the contents of the document body do not
fill the page, it still extends the body to fill the browser, but not past
the size of the browser. I don't want that blank space at the end after the
footer like in the first picture.
Thanks!
and it would always resize to the browsers