How to make a footer fixed in the page bottom

Question

In my html I have a div classed "footer". I want it to have a bg to #000 and occupy the full page width and left no white space after it.

I am currently using this CSS:

.footer {
  color: #fff;
  clear: both;
  margin: 0em 0em 0em 0em;
  padding: 0.75em 0.75em;
  background: #000;
  position: relative;
  top: 490px;
  border-top: 1px solid #000;
}

But the full page width isn't filled with this css code.

Any help? Thanks!

Answer 1

I use a few DIV elements for each section of my webpages.

<div id="tplBody">
  <div id="tplHeader">
    ...
  </div>
  <div id="tplContent">
    ...
  </div>
  <div id="tplFooter">
    ...
  </div>
</div>

Each section is relatively positioned. Using wrapping DIVs, I can set the wrapper a specific width and the elements inside it can be 100% width.

I suggest you steer away from absolute positioning and floating, because they create compatibility issues so may not appear correctly on all browsers.

Answer 2

You can use this styles in your CSS to achieve your goal

.footer{
   background-color: #000;
   min-width: 100%;
   height: 100px;
   bottom:0;
   position: fixed;
}

If you are using bootstrap try with margin-left: -15px and margin-right:-15px but it will not be necessary in most cases when you have your own class.