100% height sidebar background

**jon10** · Jul 23, 2012 09:23

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

Code:

<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>

CSS

Code:

html, body{margin: 0; padding: 0; height: 100%;}
#sidebar-right{
	background: #ccc;
    float: right;
	padding-bottom: 2000px;
	margin-bottom: -2000px;
    width: 300px;
	border-left: 2px #fff solid;
}
#container{
height: auto !important;
    margin: 0 auto -142px;
    min-height: 100%;
}

#wrap {
	height: 100%;
    overflow: hidden;
	}
	
#menu {margin: 150px 0 0 50px;}	
	
.footer {
    background: none repeat scroll 0 0 #BA6F19;
    clear: both;
    height: 100px;
    position: relative;
}	

#header {
    background: none repeat scroll 0 0 #BA6F19;
    height: 50px;
    padding: 20px;
}
#content {
    float: right;
    margin-top: 100px;
    width: 400px;
	height: 100%
	}
.footer {
    height: 142px;
}	
.push {height: 142px;}

**cheesedude** · Jul 23, 2012 12:38

Originally Posted by jon10

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.

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.

**ralph.m** · Jul 23, 2012 16:32

Originally Posted by jon10

"the Faux columns" does not seem to help in this case.

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.

**Paul O'B** · Jul 26, 2012 10:20

Hi,

You can do the sidebar in a number of ways without images. You can use the negative margin technique shown in my demos from 2003. Or you can use the absolute overlay method similar to the way that the middle section of this layout is created (from a thread yesterday).

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.

**Paul O'B** · Jul 26, 2012 14:34

Ok here's an example using your colours and should work back to ie6 and possibly beyond.

Code:

<!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.

**jon10** · Aug 7, 2012 21:46

Thanks Paul O'B!! I already thought it's not possible to achieve it with a nice piece of code.
But this solved the problem.
Cheers!!

User Tag List

Thread: 100% height sidebar background

Thread Tools

Display

Hybrid View

100% height sidebar background

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions