Log in

View Full Version : Body Not Filling Screen Height?


alexjewell
01-03-2010, 01:26 AM
Has anyone ever heard of the <body> not stretching to fill the entire height of the page? Visible here: http://alexjewell.com/beta3/index.php

The CSS is as follows:


body{
margin: 0px;
padding: 0px;
background: #f7f6af url(imgs/bot1.gif) no-repeat bottom left;
font-family: tahoma, arial, georgia, times;
font-size: 1em;
color: #1C2124;}

#container{
width: 100%;
height: auto;
background: transparent url(imgs/bg.gif) repeat-x top;
padding-bottom: 65px;}


Any ideas as to how this is even possible? Thanks!
djr33
01-03-2010, 03:12 AM
I'm not really sure what's going on. However, here's my guess:
1. The image does not go to the bottom of the window.
2. The color does go throughout the page.
Therefore, I am guessing that the "body" is acting like you'd expect a div to, and positioning your image at the bottom of it-- after all of the content, but not so low that it is far away at the bottom of the screen. This makes sense, or it would be scrolling oddly as you make the page taller/shorter by stretching, even when it's not near the content.
Because it's "bottom left", I'm guessing it's in the bottom area of the region covered by the body contents, rather than the bottom of the whole while. In some sense this seems like a problem, but I can see why it happens.

Then again, I'm not sure. Something to think about, anyway.

Clearly the body element is not entirely short-- the color does fill the window.

(Note: FF 2, OSX)
alexjewell
01-03-2010, 03:52 AM
Figured as much - but I've never seen body act like that before. As a div? That's just strange. Any ideas on fixes, Dan? lol
djr33
01-03-2010, 04:36 AM
What I mean is that I think this may be the default behavior. Try setting up another one in a similar way-- I expect it would do basically the same thing.
The "fix" I suppose would be to make sure it takes up the whole screen somehow, such as height="100%", but I'm not sure of the best approach.
alexjewell
01-03-2010, 05:11 AM
When I set body to a height of 100%, it stays there when the rest of the page scrolls past it. In other words, it only ends up 100% of the initial visible screen, not 100% of the entire page.
jscheuer1
01-03-2010, 03:55 PM
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:


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:


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):


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.
alexjewell
01-03-2010, 06:40 PM
Didn't work. I moved the question to the JavaScript section: http://www.dynamicdrive.com/forums/showthread.php?p=215146#post215146