With a valid URL DOCTYPE like you have, height: 100% only means 100% of the height of the container. If the container has no height set (and under certain circumstances, even if it does), its height is its offsetHeight (as it would mean in javascript) as determined by its content. With the body's height at 100%, it will be the offsetHeight of the HTML element.
You can do:
Code:
body{
margin: 0px;
padding: 0px;
background: #f7f6af url(imgs/bot1.gif) fixed no-repeat bottom left;
font-family: tahoma, arial, georgia, times;
font-size: 1em;
color: #1C2124;}
But, if the user's window is too short (like mine is) to accommodate all of the content in the body, the content will overlap the background image. Scrolling the page will still allow that content to be viewed without the background image behind it, but initially it will look bad, unless the background image is of a sort, more like a watermark, that can easily have text that appears on top of it be legible.
Now, since my screen is too short to see what affect this will have on your issue, I can only make it as a suggestion:
Code:
body{
margin: 0px;
padding: 0px;
font-family: tahoma, arial, georgia, times;
font-size: 1em;
color: #1C2124;}
html {
background: #f7f6af url(imgs/bot1.gif) no-repeat bottom left;
}
By moving the background to the HTML element, it is hoped that perhaps it will at least go to the bottom of the screen in browsers whose window is taller than the page content. Probably not though, because we are still dealing with the offsetHeight of the element. What you are looking for could be expressed as (loosely in javascript terms):
Code:
Math.max(documnet.documentElement.offsetHeight documnet.documentElement.clientHeight)
And a script could be worked out to position an image, possibly even a background image, that way. There may be a solution to this using css alone, but I'm not aware of any except in quirks mode where 100% height means more like you would want it to.
Body Not Filling Screen Height?
Reply With Quote
Bookmarks