Fixed Header and Footer Solution.

by Kiran Duggal

HTML

<div class="pull-right2">TEST 6</div>
<!--<div class="">HULLO!</div>-->

<div class="quickCourse">
     <!-- BEGIN: Sticky Header -->
     <div id="header_container">
         <div id="header">Header Content</div>
     </div>
     <!-- END: Sticky Header -->
     <!-- BEGIN: Page Content -->



         <div id="content">
           Start<br>
             ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br> ABC <br>End 

         </div>




    <div id="footer_container">
        <div id="footer">Footer Content</div>
    </div>

             </div>

CSS

/* Make Header Sticky */
#header_container {
    background:#eee;
    border:1px solid #666;
    height:60px;
    width:330px;
    position:relative;

}
#header {
    line-height:60px;
    margin:0 auto;
    width:100%;
    text-align:center;
}

/* Make Footer Sticky */
#footer_container {
    background:#FFF;
    border:1px solid #666;
    height:60px;
    width:330px;
    bottom: 0%;
    right:0%;
    position:absolute;
    

}
#footer {
    line-height:60px;
    margin:0 auto;
    width:100%;
    text-align:center;
}

.quick{
    width: 330px;
    position: absolute;
    height: auto;
    border: solid red 1px;
    background: darkseagreen;
    clear: both;
    top: -1px;
}


/* CSS for the content of page. I am giving top and bottom padding of 80px to make sure the header and footer do not overlap the content.*/
#container {
    margin:0 auto;
    overflow:hidden;
   
    width:320px;
}


.quickCourse {
    position:absolute;
    background: darkseagreen;
    display:nlone;
    color:red;
    text-align:center;
    width: 335px;
    max-height: 85%;
    border: solid red 1px;
    right: 0;
   overflow: hidden;



}

.pull-right2{
    float: right;
}
#content{
    overflow: scroll;
    max-height: 95%;
    height: 400px;
    min-height: 85%;
  
    
}