Dynamic Sticky Footer Height - 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

Dynamic Sticky Footer Height

Demo Code

ResultView the demo in separate window 

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

body {<!--  ww  w. ja v  a 2 s .c o m-->
   display:table;
}

main, footer {
   display:table-row;
}

main {
   height:100%;
   background:red;
}

footer {
   background:green;
}

footer:hover br {
   display:none;
}
</style> 
 </head> 
 <body translate="no"> 
  <main> 
   <div>
     Lorem 
   </div> 
  </main> 
  <footer> 
   <div>
     Lorem ip 
    <br>Lorem ip 
    <br> 
   </div> 
  </footer>  
 </body>
</html>

Related Tutorials