Friday, 25 April 2014

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


No comments :

Post a Comment