homepage Welcome to WebmasterWorld Guest from 54.166.53.169
register, free tools, login, search, pro membership, help, library, announcements, recent posts, open posts,
Pubcon Platinum Sponsor 2014
Home / Forums Index / Code, Content, and Presentation / CSS
Forum Library, Charter, Moderators: not2easy

CSS Forum

    
Can't get body height to be 100%
mr_nabo

5+ Year Member



 
Msg#: 4364666 posted 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

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



 
Msg#: 4364666 posted 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

5+ Year Member



 
Msg#: 4364666 posted 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

10+ Year Member



 
Msg#: 4364666 posted 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

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



 
Msg#: 4364666 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4364666 posted 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

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



 
Msg#: 4364666 posted 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

WebmasterWorld Senior Member 5+ Year Member



 
Msg#: 4364666 posted 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.
Global Options:
 top home search open messages active posts  
 

Home / Forums Index / Code, Content, and Presentation / CSS
rss feed

All trademarks and copyrights held by respective owners. Member comments are owned by the poster.
Home ¦ Free Tools ¦ Terms of Service ¦ Privacy Policy ¦ Report Problem ¦ About ¦ Library ¦ Newsletter
WebmasterWorld is a Developer Shed Community owned by Jim Boykin.
© Webmaster World 1996-2014 all rights reserved