Footer positioning

Warning: This page is no longer in use. The information contained on the page should NOT be seen as relevant or reliable.

In footer.html, the footer div is normally contained inside the page div e.g. moodle/theme/standardblue/footer.html

 </div> <!-- end div content -->

 <div id="footer">
    <hr size="1" noshade="noshade" />
    <?php echo $loggedinas ?>
    <?php echo $homelink ?>
  </div> <!-- end div footer -->

  </div> <!-- end div page -->
  </body>
</html>

Change this so the footer div appears after the page div

  </div> <!-- end div content -->
  </div> <!-- end div page -->
 
  <div id="footer">
    <hr size="1" noshade="noshade" />
    <?php echo $loggedinas ?>
    <?php echo $homelink ?>
  </div> <!-- end div footer -->
 
</body>
</html>

Then in the layout CSS file add the following

html, body {
  margin: 0; padding: 0;
  height: 100%;
}
 
#page {
  margin: 0; padding: 0;
  min-height: 100%; _height: 100%; /* min-height for smart browsers
                                   _height for Internet Explorer ;-)*/
}
 
#content {
  padding-bottom: 105px;
}
 
#footer {
  margin: -100px 0 0 0; padding: 0 0 10px 0; /* assuming footer of height 100px */

}

This creates a div that should always at least fill the height of the browser viewport, regardless of the amount of page content. The footer is positioned underneath this div and nudged up using a negative top margin. We also need to allow some extra space underneath the content so that when the footer gets repositioned it doesn't overlap anything. 105 pixels of padding are added to the bottom of the content div to make a space for the footer, then the footer is moved up from its current position by 100 pixels.

References

• footerStickAlt: A more robust method of positioning a footer