Sticky footer if content overflows viewport - 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 if content overflows viewport

Demo Code

ResultView the demo in separate window 

<html lang="en">
 <head> 
  <title>Lorem ipsum d</title> 
  <style>
html, body {
   margin:0;
   height:100%;
}

.header {<!--   w w w. j a  v a  2s  .c o m-->
   height:151px;
   background-color:Chartreuse;
}

.footer {
   height:100px;
   background-color:yellow;
}

.content {
   max-height:calc(100% - 151px - 100px);
   overflow:auto;
}
</style> 
 </head> 
 <body translate="no"> 
  <div class="header"></div> 
  <div class="content">
    Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br>Lorem ips 
   <br> 
  </div> 
  <div class="footer"></div>  
 </body>
</html>

Related Tutorials