Page Widget How to - Get the footer to stay at the bottom of a Web page

Question

We would like to know how to get the footer to stay at the bottom of a Web page.

Answer


<!doctype html>
<html>
<head>
  <style>
  .wrapper { position: relative; min-height: 100%; }
  .footer { <!--from   w ww.  jav  a2s  .co  m-->
     position: absolute; 
     bottom:0; 
     width: 100%; 
     height: 200px; 
     padding-top: 100px; 
     background-color: gray; 
  }
  .column { height: 2000px; padding-bottom: 300px; background-color: green; }
  </style>
</head>
<body>
  <div class="wrapper">
    <div class="column">
      <span>hello</span>
    </div>
    <div class="footer">
      <p>This is a test. This is only a test...</p>
    </div>
  </div>
</body>
</html>

The code above is rendered as follows: