Welcome to WebmasterWorld Guest from 50.19.57.50

Forum Moderators: not2easy

Message Too Old, No Replies

Can't get body height to be 100%

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

Junior Member

5+ Year Member

joined:Nov 24, 2006
posts: 193
votes: 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
11:45 am on Sept 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


That should be sufficient, providing you have a suitable DOCTYPE (and IE is not in quirks mode). Which browsers are you testing?
12:45 pm on Sept 20, 2011 (gmt 0)

Junior Member

5+ Year Member

joined:Nov 24, 2006
posts: 193
votes: 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
1:04 pm on Sept 20, 2011 (gmt 0)

Junior Member

10+ Year Member

joined:May 28, 2003
posts: 198
votes: 4


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%.
1:05 pm on Sept 20, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 0


Yeah sure, PM away, although links do seem to be tolerated a lot more these days(?)
10:13 am on Sept 22, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 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?
12:45 pm on Sept 22, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member penders is a WebmasterWorld Top Contributor of All Time 10+ Year Member Top Contributors Of The Month

joined:July 3, 2006
posts: 3123
votes: 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?
9:33 am on Sept 23, 2011 (gmt 0)

Senior Member

WebmasterWorld Senior Member 5+ Year Member

joined:Aug 9, 2008
posts: 961
votes: 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.