Tue, 2006-05-30 22:42
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
Tue, 2006-05-30 23:34
#1
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".
Wed, 2006-05-31 15:44
#2
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.
Wed, 2006-05-31 18:36
#3
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 