CSS problem

  • Thread starter Thread starter Brian Henry
  • Start date Start date
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!
 
Dear Brian,

What you should do is for the class-left bar and class-document body specify
the height as 100% (height: 100%;)and it would always resize to the browsers
total height. I didn't ry your code but I guess this should work. Hope this
helps!

Kind regards,
Yasas
 
Dear Brian,

What you should do is for the class-left bar and class-document body specify
the height as 100% (height: 100%;)and it would always resize to the browsers
total height. I didn't ry your code but I guess this should work. Hope this
helps!

Kind regards,
Yasas
 
Back
Top