Dynamic height for side bar

We can achieve this by using simple jQuery or plain css.

1. Using Jquery

We can do this by very easily with the help of a simple jQuery .In this example I used sticky footer

HTML

<div class="header">Header</div>
<div class="sidebar">Side Bar</div>
<div class="middlecontent">Content</div>
<div class="footer">Footer</div>

Jquery

$(document).ready(function(){
   
   var dynamic = $(document).height();
 
 var static = $('.sidebar');    
    
 static.css({
  'min-height': dynamic,
  'max-height': dynamic
  });
});
  

Play in fiddle

Demo

2. Using CSS

In this method not required any jQuery or JavaScript only simple css.

HTML

<div class="wrapper">
<div class="sidebar"></div>
<div class="content">Content</div>

CSS

.wrapper
    {
        min-height:100%;
        width:100%;
        position:relative;
        display:inline-block;
    }
    .sidebar
    {
        width:20%;
        top:0px;
        left:0px;
        bottom:0px;
        position:absolute;
        background-color:yellow;
    }
    .content
    {
        min-height:300px;
        width:80%;
        position:relative;
        background-color:#CCC;
        float:right;
    
    }  

Play in fiddle

Demo

Related Posts

1. Create responsive highchart

2. About CK-Editor

3. Auto complete using html5