Forum Moderators: not2easy
I am trying to get a div that is positioned 250px from the top to reach the bottom of the browser window. If I do height:100% as expected the div goes 250px beyond the bottom of the browser window.
In firefox I have set bottom:0px and that worked, but it does not work in IE (I am using ie6).
Any ideas on how to get this div to get to the bottom of the browser window if the content is not sufficient to reach the bottom?
thank you for any help / suggestions
Ice70
Here is the test code:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Template</title>
<style type="text/css">
html, body { height: 100%; }
body {
margin-top: 0px;
margin-bottom: 0px;
padding: 0px;
}
#site_wrapper{
position:relative;
margin-left:auto;
margin-right:auto;
width:818px;
height:100%;
top:0px;
}
#hori_bar{
background-color:#33FF33;
position:absolute;
top:33px;
left:0px;
width:100%;
height:200px;
z-index:100;
}
#vert_bar{
background-color:#33FF33;
position:absolute;
top:250px;
left:168px;
width:484px;
z-index:100;
bottom:0px;
}
</style>
</head>
<body>
<div id="site_wrapper">
<div id="hori_bar"><p>Navi</p></div>
<div id="vert_bar"><p>Content</p></div>
</div>
</body>
</html>
#content {
padding-bottom:30000px;
margin-bottom:-30000px;
overflow:hidden;}
That will pull the stuff down to the bottom of the viewable area of the screen, but keep the "overflow" hidden until there's actual text to make it longer.
I think there's something about this that makes the scrollbar appear in some browsers (I don't use this method very muc - so I can't rememebr exactly what it is) but if you Google "A List Apart Holy Grail" you'll find the exact method and explanation of what I'm talking about.
HTH!
thank you for the reply. This method seems to be ok until I start using absolute or realtive positioning, then the padding at the bottom displays.
But then my designer showed me the rest of the design, and the problem has now changed, and thankfully its one I can fix :)
thank you very much for your help - the article that it came from is really good and I will no doubt be referring to it in the future :0
Cheers
Ice70
