SitePoint Sponsor

User Tag List

Results 1 to 6 of 6
  1. #1
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    100% height sidebar background

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

  2. #2
    SitePoint Wizard
    Join Date
    Oct 2005
    Posts
    1,849
    Mentioned
    5 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by jon10 View Post
    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.

  3. #3
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,299
    Mentioned
    460 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by jon10 View Post
    "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.

  4. #4
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,484
    Mentioned
    182 Post(s)
    Tagged
    6 Thread(s)
    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.

  6. #6
    SitePoint Member
    Join Date
    Jul 2012
    Posts
    2
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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!!


Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •