3 replies [Last post]
jermartin77
Offline
newbie
Montana
Last seen: 14 years 13 weeks ago
Montana
Joined: 2006-05-15
Posts: 3
Points: 0

I am building a CSS layout with a height of 100% with a background image that should repeat all the way to the bottom of the page. This works fine if the content is less than the length of the screen but when the content is longer the page ends at the height of the screen. I've done some research on the subject but I can't figure this one out.

I have the html, body and #page tags all set to 100% so it should work.

I will post the gist of my code here and then a link to the site.

my CSS goes like this:
html, body, #page {
height: 100%;
}

body {
background-color: #261402;
font-family: "Times New Roman", Times, serif;
text-align: center;
font-size: 12px;
margin: 0px;
}

#page {
margin:0px auto;
width: 780px;
background-color: #FFFFFF;
background-image:url(images/content_bg.jpg);
}

/* Header Layout
--------------------------------------------------------------------------------------- */

#header {
width: 780px;
height: 100px;
clear: both;
}

/* Content Layout
--------------------------------------------------------------------------------------- */

#caboose, #content {
float: left;
}

#caboose {
width: 290px;
}

#content {
width: 410px;
padding: 25px;
margin-right: 30px;
background-color: #FFFFFF;
text-align:left;
}

/* Footer Layout
--------------------------------------------------------------------------------------- */

#footer {
clear: both;
color: #FFFFFF;
padding: 20px;
text-transform: uppercase;
}

And the layout goes like this:

<body>

<div id="page">
<div id="header"></div>
<div id="caboose"></div>
<div id="content"></div>
<div id="footer"></div>
</div>

</body>

link to site: http://www.selvacreative.com/clients/red/
link to css: http://www.selvacreative.com/clients/red/styles.css

Chris..S
Chris..S's picture
Offline
Moderator
Last seen: 7 years 47 weeks ago
Timezone: GMT+1
Joined: 2005-02-22
Posts: 6078
Points: 173

100% height problem

Look for footer stick bottom. Its a similar problem and the solution will work for you. Only you don't need the footer. Themaninblue has a good link under the name "footerstickalt".

jermartin77
Offline
newbie
Montana
Last seen: 14 years 13 weeks ago
Montana
Joined: 2006-05-15
Posts: 3
Points: 0

I don't know if that solves the problem

I don't necessarily want the footer to be postioned at the absolute bottom of the page. Just below the content is fine. When the content goes longer than a full screen length I want the <div id=page> (the containing div of the layout) to extend to the bottom of the page instead of the initial screen. So that the backgound of #page always reaches the bottom of the screen no matter what the length of the content.

Hugo
Hugo's picture
Offline
Moderator
London
Last seen: 5 years 31 weeks ago
London
Joined: 2004-06-06
Posts: 15668
Points: 2806

100% height problem

You need min-height:100%, height:100% will be ok for IE but not for FF as it correctly observes the height property and you will get no more than 100% of viewport.

On a sidenote your 'sound off' button don't appear to work nothing I could do would silence it short of grabbing my speakers and hurling them at the wall After Flash there is nothing I dislike more than noisy web sites Smile

Before you make your first post it is vital that you READ THE POSTING GUIDELINES!
----------------------------------------------------------------
Please post ALL your code - both CSS & HTML - in [code] tags
Please validate and ensure you have included a full Doctype before posting.
Why validate? Read Me