How to keep footer at bottom of screen [duplicate]

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?

6 Answers

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

* { 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; background-color: red; } /* 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*/ }

<div> <div></div> </div> <div></div>

You could use position:fixed; to bottom.

eg:

#footer{ position:fixed; bottom:0; left:0; } 

HTML

<div></div> 

CSS

#footer { position:absolute; bottom:0; width:100%; height:100px; background:blue;//optional } 

set its position:fixed and bottom:0 so that it will always reside at bottom of your browser windows

Perhaps the easiest is to use position: absolute to fix to the bottom, then a suitable margin/padding to make sure that the other text doesn't spill over the top of it.

css:

<style> body { margin: 0 0 20px; } .footer { position: absolute; bottom: 0; height: 20px; background: #f0f0f0; width: 100%; } </style> 

Here is the html main content.

<div> Here is the footer. </div> 

use this style

min-height:250px; height:auto;