I have a header on my page which is just over 100px (111px to be exact) The div below it needs to extend to the bottom of the viewport, as if i had set the bottom to 0px. The problem lies in the fact that i cannot specify top and bottom in ie6 (bug).
I can either specify top: 111px or bottom: 0px, but i still need the height to be correct ie. 100% -111px, according to the size of the viewport.
Can't seem to get expressions working coz that seems to be the solution
Any suggestions?
.left
position: absolute;
width: 200px;
top: 111px;
height: 100%
this is almost what i want, however the height is obviously 111px too much. i have tried with margin-top:111px but to no avail
Negative margins of course!
<div id="header">
<h1>Header Text</h1>
</div>
<div id="wrapper">
<div id="content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
ullamcorper velit aliquam dolor dapibus interdum sed in dolor. Phasellus
vel quam et quam congue sodales.
</div>
</div>
#header
{
height: 111px;
margin-top: 0px;
}
#wrapper
{
margin-bottom: 0px;
margin-top: -111px;
height: 100%;
position:relative;
z-index:-1;
}
#content
{
margin-top: 111px;
padding: 0.5em;
}
hmm i think i'm just going to use javascript. unless anybody has a better idea?
Alternatively, you can just use position:absolute:
#content
{
position:absolute;
top: 111px;
bottom: 0px;
}
However, IE6 doesn't like top and bottom declarations. But web developers don't like IE6.
I added the height property to the body and html tags.
HTML:
<body>
<div id="wrapper">
<div id="header">header</div>
<div id="content">content</div>
</div>
CSS:
html, body
{
height: 100%;
min-height: 100%;
margin: 0;
padding: 0;
}
#wrapper
{
height: 100%;
min-height: 100%;
}
#header
{
height: 111px;
}