spuggy spuggy - 2 months ago 11x
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?


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*/