Footer sticky to the bottom - 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

Footer sticky to the bottom

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">
* {<!--from ww w  .  j a  v a2 s  .c  o m-->
   margin:0;
}

html, body {
   height:100%;
}

body {
   height:100%;
   padding:0;
   margin:0;
   font-family:'Open Sans', sans-serif;
   background-color:Chartreuse;
   font-size:19px;
}

.content
 {
   padding:0% 0% 0% 21%;
   width:66%;
   line-height:2.8em;
   background-color:yellow;
}

.wrapper {
   min-height:100%;
   height:auto !important;
   height:100%;
   margin:0 auto -5em;
}

.footer, .push {
   height:5em;
   clear:both;
}

.footer {
   background-color:blue;
}

.footerImages {
   padding:6px 6px 6px 2px;
   float:right;
}
</style> 
 </head> 
 <body> 
  <div class="wrapper"> 
   <div id="cssmenu"> 
   </div> 
   <div id="header"> 
    <h1>Lorem ips</h1> 
   </div> 
   <div class="content">
     Lorem ipsum do 
   </div> 
   <div class="push"> 
   </div> 
  </div> 
  <!-- end wrapper --> 
  <div class="footer">
    Lorem ipsum dolor si 
  </div>  
 </body>
</html>

Related Tutorials