Sticky Footer, showing half on page load - 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, showing half on page load

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">
html, body {
   height:100%;
}

body {<!--  w  w w  .j  a  v a2  s  .  com-->
   margin:0px;
   padding:0px;
}

div#wrapper {
   width:100%;
   min-height:100%;
   height:auto !important;
   height:100%;
   margin:0px 0px -42px 0px;
}

div#footer_wrapper {
   width:100%;
   height:42px;
   background-color:Chartreuse;
}

div#content_wrapper {
   width:100%;
   padding:0px 0px 42px 0px;
}

div#footer_wrapper, div#content_wrapper {
   min-width:501px;
}

div#footer_inner_wrapper, div#content_inner_wrapper {
   width:501px;
}
</style> 
 </head> 
 <body> 
  <div id="wrapper"> 
   <div id="content_wrapper"> 
    <div id="content_inner_wrapper"> 
     <div>
       Lorem ipsum dolor sit amet, consectetu 
     </div> 
    </div> 
   </div> 
  </div> 
  <div id="footer_wrapper"> 
   <div id="footer_inner_wrapper"> 
    <div>
      Lorem ipsum dolor sit 
    </div> 
   </div> 
  </div>  
 </body>
</html>

Related Tutorials