spuggy spuggy - 1 year ago 81
CSS Question

How to keep footer at bottom of screen

What is best practice for setting up a web page so that if there is very little content/text to be displayed on that web page the footer is displayed at the bottom of the browser window and not half way up the web page?

Answer Source

What you’re looking for is the CSS Sticky Footer.


<div id="wrap">
  <div id="main"></div>

<div id="footer"></div>

The CSS:

* {
  margin: 0;
  padding: 0;

html, body {
  height: 100%;

#wrap {
  min-height: 100%;

#main {
  overflow: auto;
  padding-bottom: 180px; /* must be same height as the footer */

#footer {
  position: relative;
  margin-top: -180px; /* negative value of footer height */
  height: 180px;
  clear: both;

/* Opera Fix thanks to Maleika (Kohoutec) */
body:before {
  content: "";
  height: 100%;
  float: left;
  width: 0;
  margin-top: -32767px;/* thank you Erik J - negate effect of float*/
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download