Make footer stick to bottom of page correctly

Question

I am trying to have my footer  just a div with a line of text in it  be at the bottom of the screen if the content doesn t go all the way to the bottom  or be at the bottom of the content if the content requires scroll bars   If the content doesn t require scroll bars  it works perfectly  but when the content is too long  the footer is still in the same spot  sitting right on top of the content   My basic div structure is    lt div id  container  gt       lt div id  body  gt  lt  div gt       lt div id  footer  gt  lt  div gt   lt  div gt    My corresponding CSS  stripped down somewhat    body       margin  0      padding  0      height  100      html       margin  0      padding  0      height  100       container       width  674px      min-height  100       height  100       position  relative      margin  0 auto      body       width  616px      padding  5px 14px 5px 14px      margin  0 auto      padding-bottom  20px      footer       position  absolute      bottom  0      width  644px      height  20px      margin  0 auto

User · Answer

Why not using    position  fixed  bottom  0

User · Answer

Use this one  It will fix it    ibox footer       padding-top  3px       position  absolute      height  20px      margin-bottom  0      bottom  0      width  100

User · Answer

This should help you           margin  0    html  body       height  100      wrapper       min-height  100       height  auto  important      height  100       margin  0 auto -155px     the bottom margin is the negative value of the footer s height       footer       height  155px

User · Answer

I would like to share how I solved mine using Javascript function that is called on page load  This solution positions the footer at the bottom of the screen when the height of the page content is less than the height of the screen    x000D   x000D  function fix layout    x000D      increase content div length by uncommenting below line x000D      expandContent    x000D     x000D      var wraph   document getElementById  wrapper   offsetHeight  x000D      if wraph lt window innerHeight     if content is less than screenheight x000D          var headh     document getElementById  header   offsetHeight  x000D          var conth     document getElementById  content   offsetHeight  x000D          var footh     document getElementById  footer   offsetHeight  x000D            var foottop   window innerHeight -  headh   conth   footh   x000D          var foottop   window innerHeight -  footh   x000D              footer   css  top foottop  px     x000D        x000D    x000D   x000D  function expandContent    x000D        content   append   lt p gt Lorem ipsum dolor sit amet  consectetur adipiscing elit  Sed at ante  Mauris eleifend  quam a vulputate dictum  massa quam dapibus leo  eget vulputate orci purus ut lorem  In fringilla mi in ligula  Pellentesque aliquam quam vel dolor  Nunc adipiscing  Sed quam odio  tempus ac  aliquam molestie  varius ac  tellus  Vestibulum ut nulla aliquam risus rutrum interdum  Pellentesque lorem  Curabitur sit amet erat quis risus feugiat viverra  Pellentesque augue justo  sagittis et  lacinia at  venenatis non  arcu  Nunc nec libero  In cursus dictum risus  Etiam tristique nisl a nulla  Ut a orci  Curabitur dolor nunc  egestas at  accumsan at  malesuada nec  magna  lt  p gt    x000D   x000D    lt p gt Nulla facilisi  Nunc volutpat  Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae  Ut sit amet orci vel mauris blandit vehicula  Nullam quis enim  Integer dignissim viverra velit  Curabitur in odio  In hac habitasse platea dictumst  Ut consequat  tellus eu volutpat varius  justo orci elementum dolor  sed imperdiet nulla tellus ut diam  Vestibulum ipsum ante  malesuada quis  tempus ac  placerat sit amet  elit  lt  p gt    x000D   x000D    lt p gt Sed eget turpis a pede tempor malesuada  Vivamus quis mi at leo pulvinar hendrerit  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  Pellentesque aliquet lacus vitae pede  Nullam mollis dolor ac nisi  Phasellus sit amet urna  Praesent pellentesque sapien sed lacus  Donec lacinia odio in odio  In sit amet elit  Maecenas gravida interdum urna  Integer pretium  arcu vitae imperdiet facilisis  elit tellus tempor nisi  vel feugiat ante velit sit amet mauris  Vivamus arcu  Integer pharetra magna ac lacus  Aliquam vitae sapien in nibh vehicula auctor  Suspendisse leo mauris  pulvinar sed  tempor et  consequat ac  lacus  Proin velit  Nulla semper lobortis mauris  Duis urna erat  ornare et  imperdiet eu  suscipit sit amet  massa  Nulla nulla nisi  pellentesque at  egestas quis  fringilla eu  diam  lt  p gt    x000D   x000D    lt p gt Donec semper  sem nec tristique tempus  justo neque commodo nisl  ut gravida sem tellus suscipit nunc  Aliquam erat volutpat  Ut tincidunt pretium elit  Aliquam pulvinar  Nulla cursus  Suspendisse potenti  Etiam condimentum hendrerit felis  Duis iaculis aliquam enim  Donec dignissim augue vitae orci  Curabitur luctus felis a metus  Cum sociis natoque penatibus et magnis dis parturient montes  nascetur ridiculus mus  In varius neque at enim  Suspendisse massa nulla  viverra in  bibendum vitae  tempor quis  lorem  lt  p gt    x000D   x000D    lt p gt Donec dapibus orci sit amet elit  Maecenas rutrum ultrices lectus  Aliquam suscipit  lacus a iaculis adipiscing  eros orci pellentesque nisl  non pharetra dolor urna nec dolor  Integer cursus dolor vel magna  Integer ultrices feugiat sem  Proin nec nibh  Duis eu dui quis nunc sagittis lobortis  Fusce pharetra  enim ut sodales luctus  lectus arcu rhoncus purus  in fringilla augue elit vel lacus  In hac habitasse platea dictumst  Aliquam erat volutpat  Fusce iaculis elit id tellus  Ut accumsan malesuada turpis  Suspendisse potenti  Vestibulum lacus augue  lobortis mattis  laoreet in  varius at  nisi  Nunc gravida  Phasellus faucibus  In hac habitasse platea dictumst  Integer tempor lacus eget lectus  Praesent fringilla augue fringilla dui  lt  p gt     x000D    x000D    sample CSS   x000D  body  background  black  margin  0    x000D   header  background  grey    x000D   content background  yellow    x000D   footer  background  red  position  absolute    x000D   x000D   header   content   footer  display  inline-block  width  100vw    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt body onload  fix layout    gt  x000D           lt div id  wrapper  gt  x000D               lt div id  header  class  navbar navbar-inverse navbar-fixed-top  role  navigation  gt  x000D                   some header elements here  x000D               lt  div gt  x000D               lt div id  content  class  container  gt  x000D                 some content elements here  x000D                 x000D                 x000D               lt  div gt  x000D               lt div id  footer  class  footer  gt  x000D                   some footer elements here  x000D               lt  div gt  x000D           lt  div gt  x000D       lt  body gt  x000D   x000D   x000D    Hope that helps

User · Answer

The simplest solution is to use min-height on the  lt html gt  tag and position the  lt footer gt  with position absolute   Demo  jsfiddle and SO snippet    x000D   x000D  html   x000D      position  relative  x000D      min-height  100   x000D    x000D   x000D  body   x000D      margin  0 0 100px  x000D         bottom   footer height    x000D      padding  25px  x000D    x000D   x000D  footer   x000D      background-color  orange  x000D      position  absolute  x000D      left  0  x000D      bottom  0  x000D      height  100px  x000D      width  100   x000D      overflow  hidden  x000D    x000D   lt article gt  x000D       lt  -- or  lt div class  container  gt   etc  -- gt  x000D       lt h1 gt James Dean CSS Sticky Footer lt  h1 gt  x000D       lt p gt Blah blah blah blah lt  p gt  x000D       lt p gt More blah blah blah lt  p gt  x000D   lt  article gt  x000D   lt footer gt  x000D       lt h1 gt Footer Content lt  h1 gt  x000D   lt  footer gt  x000D   x000D   x000D

User · Answer

the easiest hack is to set a min-height to your page container at 400px assuming your footer come at the end  you dont even have to put css for the footer or just a width 100  assuming your footer is direct child of your  lt body gt

User · Answer

The model being shared here is very similar to Ryan Fait s StickyFooter  http   ryanfait com sticky-footer  Just one div is missing so far in this discussion  the model proposed here by Kenneth Palanganas worked fine for local Win81 design for about 48 hours and then in ie chrome collapsed for unknown reason   Ryan s  push  div will satisfy some reluctant browsers  Note that px is usual  however  for liquid layout consistency  em may be preferred       border  0  margin  0  padding  0    html  body   height  100      wrapper   height  auto  important  height  100   margin  0 auto -1em  min-height  100      footer   push   height  1em      lt div class  wrapper  gt  lt p gt Your website content here  lt  p gt   lt div class  push  gt  lt  div gt   lt  div gt   lt div class  footer  gt  lt p gt This is a footer lt  p gt   lt  div gt

User · Answer

A simple solution that i use  works from IE8   Give min-height 100  on html so that if content is less then still page takes full view-port height and footer sticks at bottom of page  When content increases the footer shifts down with content and keep sticking to bottom   JS fiddle working Demo  http   jsfiddle net 3L3h64qo 2   Css  html    position relative     min-height  100       Normalize html and body elements this style is just good to have   html body    margin 0    padding 0     pageContentWrapper    margin-bottom 100px    Height of footer       footer      position  absolute      bottom  0      left  0      right  0      height 100px      background  ccc      Html      lt html gt       lt body gt           lt div class  pageContentWrapper  gt               lt  -- All the page content goes here-- gt           lt  div gt           lt div class  footer  gt           lt  div gt       lt  body gt       lt  html gt

User · Answer

Use min-height as some pixel value  instead of    Like   min-height 620px  height auto    and footer as    footer       height 70px      clear both      position relative      bottom 0      width  100

User · Answer

do it using jQuery put inside code on the  lt head gt  lt  head gt  tag   lt script type  text javascript  gt    document  ready function          var docHeight     window  height        var footerHeight       footer   height        var footerTop       footer   position   top   footerHeight        if  footerTop  lt  docHeight                footer   css  margin-top   10    docHeight - footerTop     px               lt  script gt

[html] Make footer stick to bottom of page correctly

Examples related to html

Examples related to css