Question

I have two divs in my page: leftpart and rightpart which has the following css:

.leftpart{ 
       width:280px; 
       background:#0054a6; 
       color:#fff; 
       padding-top:40px; 
       height:100%; 
       min-height:637px; 
       box-shadow:3px 3px 10px #bebebe; 
       position:relative;
}
.rightpart{ 
       width:75%; 
       padding-left:10px;
}

I want this sidebar(leftpart) till the end of my page(till the bottom). I’ve set the height to 100% but when I minimize the browser it shows the white space below the bar instead of showing blue background. I mean it does not take its height as 100%. How can I get that?

Answer 1

For a full length sidebar your best bet is probably the old faux columns method. You could do this in CSS but this is probably easier for you.

Put basically you want an image with your column background’s in a thin long strip. You then add this as a background image to your parent div and it acts as pretend full height columns.

eg.

.container {
    background: url(your_image) repeat-y left top;
}

<div class="container">
    <div class="sidebar">SIDEBAR</div>
    <div class="content">CONTENT</div>
</div>

You can read more about it here – http://www.alistapart.com/articles/fauxcolumns/

If you want to try this in CSS you could try the negative margins trick.

You set your container up with overflow set to hidden, then on each div add negative margin-bottom and equal positive padding-bottom.

#container { overflow: hidden; }
#container div { float: left; background: #ccc; width: 200px; margin-bottom: -2000px; padding-bottom: 2000px; }
#container .col2 { background: #eee; }

<div id="container">
   <div>
        SIDEBAR
   </div>
   <div class="col2">
        CONTENT
   </div>
</div>