Make div stay at bottom of page s content all the time even when there are scrollbars

Question

CSS Push Div to bottom of page  Please look at that link  I want the opposite  When the content overflows to the scrollbars  I want my footer to be always at the complete bottom of the page  like Stack Overflow   I have a div with id  footer  and this CSS    footer       position  absolute      bottom  30px      width  100       But all it does is go to the bottom of the viewport  and stays there even if you scroll down  so it is no longer at the bottom   Image    Sorry if not clarified  I don t want it to be fixed  only for it to be at the actual bottom of all the content

User · Answer

if you have a fixed height footer  for example 712px  you can do this with js like so   var bgTop   0  window addEventListener  resize  theResize   function theResize        bgTop   winHeight - 712      document getElementById  bg   style marginTop   bgTop  px

User · Answer

You didn t close your   after position  absolute  Otherwise your above code would have worked perfectly    footer      position absolute     bottom 30px     width 100

User · Answer

I just want to add - most of the other answers worked fine for me  however  it took a long time to get them working   This is because setting height  100  only picks up parent div s height   So if your entire html  inside of the body  looks like the following    lt div id  holder  gt       lt header gt       lt  header gt       lt div id  body  gt      lt  div gt       lt footer gt      lt  footer gt   lt  div gt    Then the following will be fine   html body      height  100      holder      min-height  100       position relative      body      padding-bottom  100px        height of footer       footer      height  100px       width 100       position  absolute      left  0      bottom  0          as  holder  will pick up it s height directly from  body    Kudos to My Head Hurts  whose answer was the one I ended up getting to work   However  If your html is more nested  because it s only an element of the full page  or it s within a certain column  etc  then you need to make sure every containing element also has height  100  set on the div  Otherwise  the information on height will be lost between  body  and  holder    E g  the following  where I ve added the  full height  class to every div to make sure the height gets all the way down to our header body footer elements    lt div class  full-height  gt       lt div class  container full-height  gt           lt div id  holder  gt               lt header gt       lt  header gt               lt div id  body  gt      lt  div gt               lt footer gt      lt  footer gt           lt  div gt       lt  div gt   lt  div gt    And remember to set height on full-height class in the css    full-height      height  100       That fixed my issues

User · Answer

position  fixed  bottom  0   if needs element in whole display and left align  left 0  width  100

User · Answer

I realise it says not to use this for  responding to other answers  but unfortunately I don t have enough rep to add a comment onto the appropriate answer     but      If you are having problems in asp net with the answer from  My Head Hurts  - you need to add  height   100   to the main generated FORM tag as well as HTML and BODY tags in order for this to work

User · Answer

This is precisely what position  fixed was designed for    footer       position  fixed      bottom  0      width  100       Here s the fiddle  http   jsfiddle net uw8f9

User · Answer

Unfortunately you can t do this with out adding a little extra HTML and having one piece of CSS rely on another   HTML  First you need to wrap your header footer and  body into a  holder div    lt div id  holder  gt       lt header gt       lt  header gt       lt div id  body  gt      lt  div gt       lt footer gt      lt  footer gt   lt  div gt    CSS  Then set height  100  to html and body  actual body  not your  body div  to ensure you can set minimum height as a percentage on child elements   Now set min-height  100  on the  holder div so it fills the content of the screen and use position  absolute to sit the footer at the bottom of the  holder div   Unfortunately  you have to apply padding-bottom to the  body div that is the same height as the footer to ensure that the footer does not sit above any content   html body      height  100      holder      min-height  100       position relative      body      padding-bottom  100px        height of footer       footer      height  100px       width 100       position  absolute      left  0      bottom  0       Working example  short body  http   jsfiddle net ELUGc   Working example  long body  http   jsfiddle net ELUGc 1

User · Answer

This is an intuitive solution using the viewport command that just sets the minimum height to the viewport height minus the footer height   html body  height  100     nonFooter  min-height  calc 100vh - 30px      footer   height 30px  margin  0  clear  both  width 100

User · Answer

Just worked out for another solution as above example have bug  somewhere error   for me  Variation from the selected answer   html body       height  100      nonFooter       min-height  100       position relative         Firefox        min-height  -moz-calc 100  - 30px          WebKit        min-height  -webkit-calc 100  - 30px          Opera        min-height  -o-calc 100  - 30px          Standard        min-height  calc 100  - 30px       footer       height 30px      margin  0      clear  both      width 100       position  relative      for html layout   lt body gt       lt div id  nonFooter  gt header middle left right etc lt  div gt       lt div id  footer  gt  lt  div gt   lt  body gt    Well this way don t support old browser however its acceptable for old browser to scrolldown 30px to view the footer   plunker

User · Answer

I ve solved a similar issue by putting all of my main content within an extra div tag  id  outer     I ve then moved the div tag with id  footer  outside of this last  outer  div tag  I ve used CSS to specify the height of  outer  and specified the width and height of  footer    I ve also used CSS to specify the margin-left and margin-right of  footer  as auto   The result is that the footer sits firmly at the bottom of my page and scrolls with the page too  although  it s still appears inside the  outer  div  but happily outside of the main  content  div  which seems strange  but it s where I want it

User · Answer

I would comment if i could   but i have no permissions yet  so i will post a hint as an answer  for unexpected behavior on some android devices   Position  Fixed only works in Android 2 1 thru 2 3 by using the following meta tag     lt meta name  viewport  content  width device-width  user-scalable no  gt     see http   caniuse com  search position

User · Answer

use fixed-bottom bootstrap class   lt div id  footer  class  fixed-bottom w-100  gt

[css] Make div stay at bottom of page's content all the time even when there are scrollbars

Examples related to css

Examples related to positioning

Examples related to css-position

Examples related to footer