How to keep footer at bottom of screen

Question

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

User · Accepted Answer

What you   re looking for is the CSS Sticky Footer    x000D   x000D      x000D    margin  0  x000D    padding  0  x000D    x000D   x000D  html  x000D  body   x000D    height  100   x000D    x000D   x000D   wrap   x000D    min-height  100   x000D    x000D   x000D   main   x000D    overflow  auto  x000D    padding-bottom  180px  x000D       must be same height as the footer    x000D    x000D   x000D   footer   x000D    position  relative  x000D    margin-top  -180px  x000D       negative value of footer height    x000D    height  180px  x000D    clear  both  x000D    background-color  red  x000D    x000D   x000D   x000D     Opera Fix thanks to Maleika  Kohoutec     x000D   x000D  body before   x000D    content      x000D    height  100   x000D    float  left  x000D    width  0  x000D    margin-top  -32767px  x000D       thank you Erik J - negate effect of float   x000D    x000D   lt div id  wrap  gt  x000D     lt div id  main  gt  lt  div gt  x000D   lt  div gt  x000D   x000D   lt div id  footer  gt  lt  div gt  x000D   x000D   x000D

User · Answer

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

User · Answer

You could use position fixed  to bottom   eg    footer   position fixed   bottom 0   left 0

User · Answer

HTML   lt div id  footer  gt  lt  div gt    CSS   footer      position absolute     bottom 0     width 100      height 100px        background blue   optional

User · Answer

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    lt style gt    body       margin  0 0 20px         footer       position  absolute      bottom  0      height  20px      background   f0f0f0      width  100        lt  style gt    Here is the html main content    lt div class  footer  gt  Here is the footer   lt  div gt

User · Answer

use this style  min-height 250px  height auto

[html] How to keep footer at bottom of screen

Examples related to html

Examples related to css