Ive started to try my hand at websites, using CSS.
This is (probably) something really simple but even after trawling the web for a fix, I still can't get this working.
The basic layout is a 800px width container DIV centered on the page, with a header DIV at the top in the container DIV, a content DIV below the header (still inside the container), and a footer DIV at the bottom of the container DIV. Very generic, si.
What I'm trying to do is to set the minimum height (of the #container) to fill the screen - so that even if there is not a lot of content, the div will still extent to the bottom of the screen.
Here's my code (might be a bit messy as I've tried bits of everything):
Sorry if there's any typos, I had to type it manually as the laptop's wireless isn't working atm.Code:html { height:100%; } body { position:relative; min-height:100%; } * html body { height:100%; } #container { width:800px; margin-left:auto; margin-right:auto; border: 1px solid #003399; min-height:100%; height:auto; <--- have tried 100% too float:none; } #container #header { position: relative; height:115px; } #container #content1 { background color: gold; color: #000099; height: auto; <---- have tried 100% too min-height: 100%; } #container #footer { position: relative; bottom:0px;
Everything is where I want it, no problems, it's just making it extend to the bottom of the screen for pages with little content....
Any help appreciated, thanks in advance![]()


LinkBack URL
About LinkBacks
Reply With Quote


