Hey!
I’ve been tasked with cutting up and making the markup for a really strange design. It has a gradient that is about 300px high and if the window is larger than 300px, the last pixel of the gradient should go to the bottom. If you catch my drift. All of that is on an existing background already.
Anyway, the only solution I can come up with is having two nested divs, both at 100% height. One would contain the gradient background, which would not repeat, and the other would contain only the 1px of color that repeats all the way to the bottom.
<body>
<div id="nonFooter">
<div id="nonFooterWrap">
</div>
</div>
</body>
html {
height:100%;
}
body {
height:100%;}
#nonFooter {
position:relative;
min-height:100%;
}
* html #nonFooter {
height:100%;
}
div#nonFooterWrap {
min-height:100%;
position:relative;
}
* html div#nonFooterWrap {
height:100%;
}
But the problem is, I can’t get #nonFooterWrap to display at 100% height, even though #nonFooter is at 100% height i.e. has the height of the window.
I’ve really been busting my head with this and I really don’t see a solution here, it all doesn’t make sense.
If the first div has a height of 100% (and its parent has a height of 100%) I don’t see why the second div won’t assume a height of 100%, even though its parent also has a height of 100%.
(the * html #nonFooter is an IE hack, because I’m also using a footer that’s at the bottom, only IE sees this. But Firefox and Opera both fail to render the second div at 100% height)
