Sticky Footer - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer stick to bottom

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer stick to bottom

Description

Sticky Footer

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <style media="all">
html, body {
   height:100%;
   margin:0;
   padding:0;
}

* html #outer {<!--from www  . j a v a2  s  .c o m-->
   height:100%;
}

.wrapper {
   min-height:100%;
   margin:-241px auto 0;
}

.content {
   padding-top:241px;
}

.footer {
   height:241px;
   background:Chartreuse;
   position:relative;
}

#print_blank {
   padding-top:0px;
   bottom:161px;
   position:absolute;
   z-index:11001;
   width:100% !important;
   text-align:center;
   min-width:981px;
}

#logo {
   width:181px;
   padding-top:6px;
   bottom:87px;
   position:absolute;
   z-index:10000000;
   left:46px;
}

#nav_bar {
   padding-top:0px;
   bottom:78px;
   position:absolute;
   z-index:100000;
   width:100% !important;
   text-align:center;
   min-width:981px;
}

#footerarea {
   bottom:0px;
   position:absolute;
   width:100%;
   padding-top:21px;
   background-color:yellow;
   height:auto;
   text-align:justify;
   min-width:961px;
   z-index:1000000;
}
</style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div class="content">
     Lorem ipsum dolor sit a 
   </div> 
   <div class="push"></div> 
   <!-- end wrapper --> 
  </div> 
  <div class="footer"> 
   <div id="print_blank"></div> 
   <div id="logo"></div> 
   <div id="nav_bar"></div> 
   <div id="footerarea">
     Lorem ipsum dolor sit 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials