stick <footer> element at the bottom of the page - HTML CSS CSS Widget

HTML CSS examples for CSS Widget:Footer aligned bottom

  1. HOME
  2. HTML CSS
  3. CSS Widget
  4. Footer aligned bottom

Description

stick <footer> element at the bottom of the page

Demo Code

ResultView the demo in separate window 


<html>
 <head> 
  <style type="text/css">
html,body {
   padding:0;
   margin:0;
}

header {<!-- w  ww .  jav a 2  s. c  o  m-->
   position:fixed;
   top:0;
   width:100%;
   height:41px;
   background-color:Chartreuse;
   padding:21px;
}

footer {
   background-color:yellow;
   color:blue;
   width:100%;
   bottom:0;
   position:fixed;
}

#main {
   padding-top:100px;
   text-align:center;
   border:2px solid pink;
   margin-bottom:2.6em;
}
</style> 
 </head> 
 <body> 
  <header>
    Lorem ip 
  </header> 
  <div id="main">
    Lorem 
  </div> 
  <footer>
    Lorem ip 
  </footer>  
 </body>
</html>

Related Tutorials