I’ve posted to few forums, but still haven’t found a solution to this problem
I try to make my sidebar background 100% height regardless of the content.
You can see it here
I would like my sidebar background stretch all the way down (to footer).
At the moment it stretches as far as the “content div” goes.
It seems like the sidebar div is 100% height (when Firebugged) but the background color of the sidebar is not, and stops where content div ends.
I tried 100% !important and few other tricks, but it didn’t work.
Also “the Faux columns” does not seem to help in this case.
Any ideas>??
Thanks in advance!
HTML
<body>
<div id="container">
<div id="header"></div>
<div id="wrap">
<div id="sidebar-right">
<div id="menu">
lorem ipsum
</div>
</div>
<div id="content">
Lorem ipsum dolor sit amet,
</div>
</div>
<div class="push"></div>
</div>
<div class="footer"></div>
</body>
One of the shortcomings of CSS is that you cannot make a column expand to the full height of its parent container. It will only expand to the height necessary to contain its content or to the height you explicitly specify in CSS. Currently, there is no way around this. Not long ago a specification was proposed for the next generation of CSS to make column height grow to 100%. It is going to be quite a few years before something like this is in wide-spread use.
Your only option is to use a faux column using a background image applied to the parent container of the column, which is #wrap. It is a major pain because if you want to change the width of your sidebar, you are going to have to create another background image to use.
It will work if you put the background image on the <body> element, so that’s the easiest solution. You could also try the 100% high page method and then put the image on the container, but that’s a little trickier … though probably what you want here.
You should abandon the sticky footer method you are using as it is broken in a lot of browsers and use the one from the css faq as it is the one that works best.
If I get a chance later this evening I’ll knock up a more up to date demo.
Ok here’s an example using your colours and should work back to ie6 and possibly beyond.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
/* CSS Document */
h1, p { margin:0 0 1em }
/*Opera Fix for sticky footer*/
body:before {
content:"";
height:100%;
float:left;
width:0;
margin-top:-32767px;/* negate effect of float*/
}
#container:after {
clear:both;
display:block;
height:1%;
content:" ";
}
html, body {
margin: 0;
padding: 0;
height: 100%;
}
#container {
margin:-142px auto 0;
min-height: 100%;
position:relative;
clear:both;
}
* html #container { height: 100% }/* ie6 only */
#sidebar-right {
float: right;
width: 280px;
position:relative;
z-index:2;
padding:10px;
}
#header {
border-top:142px solid #BA6F19;/* soak up sticky footer space */
background:#BA6F19;
min-height: 50px;
padding: 20px;
position:relative;
z-index:2;
}
* html #header { height:50px }
#content {
padding:10px;
margin:0 301px 0 0;
}
#inner {
width:100%;
float:left;
}
#footer {
background: #BA6F19;
clear: both;
position: relative;
height: 142px;
}
.abs {/* absolute overlay holds no content*/
position:absolute;
right:0;
top:232px;
bottom:0;
width:300px;
border-left:1px solid red;
background: #ccc;
z-index:1;
}
* html .abs {
bottom:0;
top:auto;
height:9999em
}
</style>
</head>
<body>
<div id="container">
<div id="header">
<h1>Header</h1>
</div>
<div id="sidebar-right">
<p>Right column content</p>
<p>Right column content</p>
<p>Right column content</p>
<p>Right column content</p>
</div>
<div id="content">
<div id="inner">
<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus adipiscing, nunc quis vehicula vehicula, mi nunc tempor lorem, nec congue augue neque vitae augue. Suspendisse vitae elit a purus commodo lobortis. Nullam placerat magna id sem. Nulla lacinia ultrices est. Ut auctor, sem sed interdum aliquam, diam nulla viverra quam, sed faucibus risus dui sit amet mauris. Proin quam enim, luctus ut, faucibus quis, interdum vel, felis. Integer laoreet, justo quis placerat lobortis, metus mauris iaculis augue, sit amet fermentum lectus ante vel lorem. Integer non leo et enim</p>
</div>
</div>
<div class="abs"></div>
</div>
<div id="footer"> </div>
</body>
</html>
It uses the absolute overlay technique I mentioned earlier to make the full height right column and then uses the standard sticky footer as describe in detail in the css faq.