Can't get body height to be 100%

Forum Moderators: not2easy

Message Too Old, No Replies

Can't get body height to be 100%

mr_nabo

8:12 am on Sep 20, 2011 (gmt 0)

Hi,

I'm trying to get the height of the body in my site to be 100% (I can PM a link to the site if need be as I believe it's against policy to post links here).

What I'm doing wrong please? I've specified this in my CSS already:

html, body { padding: 0px; margin: 0px; width: 100%; height: 100%; }

Thanks,

mn

penders

11:45 am on Sep 20, 2011 (gmt 0)

That should be sufficient, providing you have a suitable DOCTYPE (and IE is not in quirks mode). Which browsers are you testing?

mr_nabo

12:45 pm on Sep 20, 2011 (gmt 0)

Hi Penders,

I know, I'm confused as to why it's not working - can I PM you the link so you can see the site I'm talking about?

Thanks,

mn

Paul_o_b

1:04 pm on Sep 20, 2011 (gmt 0)

Hi,

This is the minimum you need:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
html, body {
height:100%;
margin:0;
padding:0;
}
#outer {
width:960px;
margin:auto;
background:#fcf;
min-height:100%;
}
* html #outer{height:100%}/* IE6 only*/
</style>
</head>

<body>
<div id="outer"></div>
</body>
</html>

Assuming you want a page wrapper to also stretch to 100%.

penders

1:05 pm on Sep 20, 2011 (gmt 0)

Yeah sure, PM away, although links do seem to be tolerated a lot more these days(?)

alt131

10:13 am on Sep 22, 2011 (gmt 0)

Hi mr_nabo, and welcome back to css :)

To clarify, you are quite correct - it is against policy to post links. Thanks for respecting that.

We ask for code because this is a code discussion forum. Posting code means all members can see the code, join the discussion and later readers can benefit long after the link has 404'd or the code on the page has changed.

For that reason it is also against policy to arrange PM's - they take the discussion off-forum and no-one else benefits. I let yours run because I expected none of the regular members would respond - ... penders you know better ;)

But back to the fun of code - as everyone else has said, what you have should be enough - so this is an interesting issue. Can you provide more information about the document so we can try to establish why it isn't working?

penders

12:45 pm on Sep 22, 2011 (gmt 0)

I was intending to follow this up... as it is now resolved. However, the problem was really a slight misunderstanding of what height:100% on the body actually means. It was setting the height of the body to the height of the view port (visible browser area) which is as expected, however, the user was expecting the body to be 100% the height of the document.

The document was actually overflowing the body container, since it was higher than the view port. The body had a background-image positioned at the bottom of the body (which was intended to be at the bottom of the document). This background-image appeared mid-document and scrolled with the document giving the impression that height:100% wasn't working as it should, although it was working OK.

In order to resolve this, the user needed to set the background-image on a containing DIV element of min-height:100% (see @Paul_o_b's example above - the #outer element), in order to position the image at the bottom of the document and not the body.

However, the user chose to set the background-image on an additional DIV with position:fixed so that the background-image would always appear at the bottom of the viewable area and not scroll with the document. I think that may be this could have also been resolved by setting background-attachment:fixed on the body?

alt131

9:33 am on Sep 23, 2011 (gmt 0)

It was setting the height of the body to the height of the view port (visible browser area) which is as expected, however, the user was expecting the body to be 100% the height of the document.

Good spotting! - and thanks for the explanation of the problem and solutions.