CSS to make HTML page footer stay at bottom of the page with a minimum height but not overlap the page

Question

I have the following page  deadlink  http   www workingstorage com Sample htm   that has a footer which I can t make sit at the bottom of the page  I want the footer to  stick to the window bottom when the page is short and the screen is not filled  and stay at the document end and move down as normal when there is more than a screenful of content  instead of overlapping the content    The CSS is inherited and befuddles me  I can t seem to change it properly to put a minimum height on the content or make the footer go to the bottom

User · Answer

I have used in my many projects and never got any single issue :)

for your reference, Code are in snippet

_x000D_

* {_x000D_
 margin: 0;_x000D_
}_x000D_
html, body {_x000D_
 height: 100%;_x000D_
}_x000D_
.wrapper {_x000D_
 min-height: 100%;_x000D_
 height: auto !important; /* This line and the next line are not necessary unless you need IE6 support */_x000D_
 height: 100%;_x000D_
 margin: 0 auto -50px; /* the bottom margin is the negative value of the footer's height */_x000D_
  background:green;_x000D_
}_x000D_
.footer, .push {_x000D_
 height: 50px; /* .push must be the same height as .footer */_x000D_
}_x000D_
_x000D_
.footer{_x000D_
  background:gold;_x000D_
  }

_x000D_

<html>_x000D_
<head>_x000D_
<meta charset="utf-8">_x000D_
<title>Untitled Document</title>_x000D_
</head>_x000D_
_x000D_
<body>_x000D_
  <div class="wrapper">_x000D_
    Content Area_x000D_
    </div>_x000D_
  _x000D_
  <div class="push">_x000D_
    </div>_x000D_
  _x000D_
  <div class="footer">_x000D_
    Footer Area_x000D_
    </div>_x000D_
</body>_x000D_
</html>

_x000D_

User · Answer

What I did Html      lt div gt         lt div class  quot register quot  gt              your content              lt  div gt         lt div class  quot footer quot    gt     lt div  gt   css  register             min-height   calc 100vh - 10rem         footer            height  10rem      Dont need to use position fixed and absolute  Just write the html in proper way

User · Answer

This is known as a sticky footer  A google search for it comes up with a lot of results  A CSS Sticky Footer is the one I ve used successfully  But there are more    x000D   x000D      x000D      margin  0  x000D    x000D  html  body   x000D      height  100   x000D    x000D   wrapper   x000D      min-height  100   x000D      height  auto  important  x000D      height  100   x000D      margin  0 auto -4em  x000D    x000D   footer   push   x000D      height  4em  x000D    x000D   lt html gt  x000D       lt head gt  x000D           lt link rel  stylesheet  href  layout css        gt  x000D       lt  head gt  x000D       lt body gt  x000D           lt div class  wrapper  gt  x000D               lt p gt Your website content here  lt  p gt  x000D               lt div class  push  gt  lt  div gt  x000D           lt  div gt  x000D           lt div class  footer  gt  x000D               lt p gt Copyright  c  2008 lt  p gt  x000D           lt  div gt  x000D       lt  body gt  x000D   lt  html gt  x000D   x000D   x000D    Source for this code

User · Answer

Some solutions didn t work for me but the best option I found was the example below when i decided to use the flex option   x000D   x000D  html  body      height  100         body      display  flex      flex-direction  column      main-contents       flex  1 0 auto      min-height  100       margin-bottom  -77px    background-color   CCC      footer      height   77px      min-height  77px      width  100       bottom  0      left  0      background   000000      flex-shrink  0      flex-direction  row      position  relative                footer-text    color   FFF      media screen and  max-width  767px        content          padding-bottom  0             footer          position  relative            position  absolute            height  77px          width  100           bottom  0          left  0           x000D   lt html gt     lt body gt       lt div class  main-contents   gt        this is the main content      lt  div gt     lt  body gt      lt footer class  footer  gt       lt p class  footer-text  gt This is the sticky footer lt  p gt     lt  footer gt    lt  html gt  x000D   x000D   x000D

User · Answer

I ve used this to stick my footer to the bottom and it worked for me   HTML   lt body gt       lt div class  allButFooter  gt           lt  -- Your page s content goes here  including header  nav  aside  everything -- gt       lt  div gt       lt footer gt           lt  -- Footer content -- gt       lt  footer gt   lt  body gt    That s the only modification you have to do in the HTML  add that div with the  allButFooter  class  I did it with all the pages  those that were so short  I knew the footer wouldn t stick to the bottom  and also pages long enough that I already knew I had to scroll  I did this  so I could see that it works ok in the case that a page s content is dynamic    CSS   allButFooter       min-height  calc 100vh - 40px       The  allButFooter  class has a min-height value that depends on the viewport s height  100vh means 100  of the viewport height  and the footer s height  that I already knew was 40px   That s all I did  and it worked perfectly for me  I haven t tried it in every browser  just Firefox  Chrome and Edge  and the results were as I wanted  The footer sticks to the bottom  and you don t have to mess with z-index  position  or any other properties  The position of every element in my document was the default position  I didn t change it to absolute or fixed or anything   Working with responsive design  Here s something I would like to clear out  This solution  with the same Footer that was 40px high didn t work as I expected when I was working in a responsive design using Twitter-Bootstrap  I had to modify the value I was substracting in the function    allButFooter       min-height  calc 100vh - 95px        This is probably because Twitter-Bootstrap comes with its own margins and paddings  so that s why I had to adjust that value   I hope this is of some use for you guys  At least  it s a simple solution to try  and it doesn t involve making big changes to the whole document

User · Answer

I consider you can set the main content to viewport height  so if the content exceeds  the height of the main content will define the position of the footer  x000D   x000D        margin  0    padding  0    width  100      body     display  flex    flex-direction  column     header     height  50px    background  red     main     background  blue       This is the most important part     height  100vh        footer    background  black    height  50px    bottom  0    x000D   lt header gt  lt  header gt   lt main gt  lt  main gt   lt footer gt  lt  footer gt  x000D   x000D   x000D

User · Answer

Below are 4 different methods of mine  In each example the texts are freely-editable to illustrate how the content would render in different scenarios   1  Flexbox  x000D   x000D  body  height 100vh  margin 0     header  min-height 50px  background lightcyan    footer  min-height 50px  background PapayaWhip        Trick    body     display flex     flex-direction column      footer    margin-top auto     x000D   lt body gt     lt header contentEditable gt Header lt  header gt     lt article contentEditable gt Content lt  article gt     lt footer contentEditable gt Footer lt  footer gt   lt  body gt  x000D   x000D   x000D    2  Grid  x000D   x000D  body     min-height  100vh     margin  0        display  grid    grid-template-rows  auto 1fr auto     header     min-height 50px    background lightcyan      footer     min-height 50px     background PapayaWhip     x000D   lt body gt     lt header contentEditable gt Header lt  header gt     lt article contentEditable gt Content lt  article gt     lt footer contentEditable gt Footer lt  footer gt   lt  body gt  x000D   x000D   x000D    This method below uses a  quot trick quot  by placing an   after pseudo-element on the body  and set it to have the exact height of the footer  so it will occupy the exact same space the footer does  so when the footer is absolute positioned over it  it would appear like the footer is really taking up space and eliminate the negative affects of it s absolute positioning  for example  going over the body s content  3  position absolute  no dynamic footer height   x000D   x000D  body  min-height 100vh  margin 0  position relative    header  min-height 50px  background lightcyan    footer  background PapayaWhip        Trick     body     position  relative     body  after     content        display  block    height  50px     Set same as footer s height       footer     position  absolute    bottom  0    width  100     height  50px    x000D   lt body gt     lt header contentEditable gt Header lt  header gt     lt article contentEditable gt Content lt  article gt     lt footer contentEditable gt Footer lt  footer gt   lt  body gt  x000D   x000D   x000D    4  Table-layout  x000D   x000D  html  height 100     body   min-height 100    margin 0     header     height  50px    background  lightcyan     article      height  1      footer     height  50px    background  PapayaWhip           Trick         body     display  table    width  100       body  gt  footer      display  table-row    x000D   lt body gt     lt header contentEditable gt Header lt  header gt     lt article contentEditable gt Content lt  article gt     lt footer contentEditable gt Footer lt  footer gt   lt  body gt  x000D   x000D   x000D

User · Answer

A simple method is to make the body 100  of your page  with a min-height of 100  too  This works fine if the height of your footer does not change   Give the footer a negative margin-top   footer       clear  both      position  relative      height  200px      margin-top  -200px

User · Answer

Do this   lt footer style  position  fixed  bottom  0  width  100    gt   lt  footer gt    You can also read about flex it is supported by all modern browsers  Update  I read about flex and tried it  It worked for me  Hope it does the same for you  Here is how I implemented Here main is not the ID it is the  div  body       margin  0      display  flex      min-height  100vh      flex-direction  column     main       display  block      flex  1 0 auto      Here you can read more about flex https   css-tricks com snippets css a-guide-to-flexbox   Do keep in mind it is not supported by older versions of IE

User · Answer

This is how i solved the same issue   x000D   x000D  html   x000D    height  100   x000D    box-sizing  border-box  x000D    x000D   x000D     x000D    before  x000D    after   x000D    box-sizing  inherit  x000D    x000D   x000D  body   x000D    position  relative  x000D    margin  0  x000D    padding-bottom  6rem  x000D    min-height  100   x000D    font-family   Helvetica Neue   Arial  sans-serif  x000D    x000D   x000D   demo   x000D    margin  0 auto  x000D    padding-top  64px  x000D    max-width  640px  x000D    width  94   x000D    x000D   x000D   footer   x000D    position  absolute  x000D    right  0  x000D    bottom  0  x000D    left  0  x000D    padding  1rem  x000D    background-color   efefef  x000D    text-align  center  x000D    x000D   lt div class  demo  gt  x000D   x000D     lt h1 gt CSS    Always on the bottom    Footer lt  h1 gt  x000D   x000D     lt p gt I often find myself designing a website where the footer must rest at the bottom of the page  even if the content above it is too short to push it to the bottom of the viewport naturally  lt  p gt  x000D   x000D     lt p gt However  if the content is taller than the user   s viewport  then the footer should disappear from view as it would normally  resting at the bottom of the page  not fixed to the viewport   lt  p gt  x000D   x000D     lt p gt If you know the height of the footer  then you should set it explicitly  and set the bottom padding of the footer   s parent element to be the same value  or larger if you want some spacing   lt  p gt  x000D   x000D     lt p gt This is to prevent the footer from overlapping the content above it  since it is being removed from the document flow with  lt code gt position  absolute   lt  code gt   lt  p gt  x000D   lt  div gt  x000D   x000D   lt div class  footer  gt This footer will always be positioned at the bottom of the page  but  lt strong gt not fixed lt  strong gt   lt  div gt  x000D   x000D   x000D

User · Answer

lt  DOCTYPE html gt    lt html gt    lt head gt      lt link rel  stylesheet  type  text css  href  main css    gt    lt  head gt    lt body gt    lt div id  page-container  gt      lt div id  content-wrap  gt        lt  -- all other page content -- gt      lt  div gt      lt footer id  footer  gt  lt  footer gt    lt  div gt   lt  body gt    lt  html gt     page-container     position  relative    min-height  100vh      content-wrap     padding-bottom  2 5rem        Footer height        footer     position  absolute    bottom  0    width  100     height  2 5rem                Footer height

User · Answer

It s actually very simple  This solution doesn t require to know footer height   lt body gt     lt div class  quot app quot  gt      Website    lt  div gt     lt div class  quot footer quot  gt      Footer    lt  div gt   lt  body gt    app     min-height  100vh

User · Answer

I have myself been looking into this problem  I have seen quite a few solutions and each of them had issues  often involving some magic numbers   So using best practices from various sources I came up with this solution   http   jsfiddle net vfSM3 248   The thing I wanted to achieve specifically here was to get the main content to scroll between footer and header inside green area   here is a simple css   html  body       height  100       margin  0      padding  0    header       height  4em      background-color  red      position  relative      z-index  1     content       background  white      position  absolute      top  5em      bottom  5em      overflow  auto     contentinner      container       height  100       margin  -4em 0 -2em 0      background  green      position  relative      overflow  auto    footer        height  2em       position  relative       z-index  1       background-color  yellow

User · Answer

Just set the html  body  and the other rows except the footer to 100   e g    lt body gt   lt header gt  lt  header gt   lt content gt  lt  content gt   lt footer gt  lt  footer gt     the css becomes   html  body  header  content  height 100

User · Answer

Dynamic one liner using jQuery All CSS methods I have come across are too rigid  Also  setting the footer to fixed is not an option if that s not part of the design   Tested on   Chrome  60 FF  54 IE  11  Assuming this layout   lt html gt    lt body gt     lt div id  quot content quot  gt  lt  div gt     lt div id  quot footer quot  gt  lt  div gt   lt  body gt    lt  html gt   Use the following jQuery function      content   css  quot min-height quot     window  height   -    quot  footer quot   height      quot px quot     What that does is set the min-height for  content to the window height - the height of the footer what ever that might be at the time  Since we used min-height  if  content height exceeds the window height  the function degrades gracefully and does not any effect anything since it s not needed  See it in action   x000D   x000D      fix   click function           content   css  min-height     window  height   -     footer   height      px        x000D        margin  0    padding  0    box-sizing  border-box     html     background   111     body     text-align  center    background   444     content     background   999      footer     background   777    width  100     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt    lt html gt    lt body gt     lt div id  content  gt       lt p gt Very short content lt  p gt       lt button id  fix  gt Fix it  lt  button gt     lt  div gt     lt div id  footer  gt Mr  Footer lt  div gt   lt  body gt    lt  html gt  x000D   x000D   x000D   Same snippet on JsFiddle  Bonus  We can take this further and make this function adapt to dynamic viewer height resizing like so   x000D   x000D    window  resize function             content   css  min-height     window  height   -     footer   height      px         resize    x000D        margin  0    padding  0    box-sizing  border-box     html     background   111     body     text-align  center    background   444     content     background   999      footer     background   777    width  100     x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt    lt html gt    lt body gt     lt div id  content  gt       lt p gt Very short content lt  p gt     lt  div gt     lt div id  footer  gt Mr  Footer lt  div gt   lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

I just answered as similar question in here    Position footer at bottom of page having fixed header  I m pretty new at web development  and I know this has been answered already  but this is the easiest way I found to solve it and I  think is somehow different  I wanted something flexible because the footer of my web app has a dynamic height  I ended up using FlexBox and a spacer    Start by setting the height for your html and body   html  body       height  100       display  flex      flex-direction  column      margin  0px        I m assuming a column behavior for our app  in the case you need to add a header  hero or any content vertically aligned     Create the spacer class    spacer       flex  1          So later on your HTML could be something like     lt html gt     lt body gt       lt header gt  Header  lt  header gt      Some content         lt div class  spacer  gt  lt  div gt       lt footer gt  Footer  lt  footer gt     lt  body gt   lt  html gt      You can play with it here https   codepen io anon pen xmGZQL

User · Answer

My jquery method  this one puts the footer at the bottom of the page if the page content is less than the window height  or just puts the footer after the content otherwise   Also  keeping the code in it s own enclosure before other code will reduce the time it takes to reposition the footer    function             footer   css  position     document  height    gt    window  height      inherit     fixed

User · Answer

You can do this   footer     position  absolute    right  0    bottom  0    left  0    padding  1rem    text-align  center

User · Answer

From IE7 onwards you can simply use   footer       position fixed      bottom 0      See caniuse for support

User · Answer

A very simple approach which works great cross browser is this   http   matthewjamestaylor com blog keeping-footers-at-the-bottom-of-the-page   x000D   x000D  html  x000D  body   x000D     margin 0  x000D     padding 0  x000D     height 100   x000D    x000D   container   x000D     min-height 100   x000D     position relative  x000D    x000D   header   x000D     background  ff0  x000D     padding 10px  x000D    x000D   body   x000D     padding 10px  x000D     padding-bottom 60px       Height of the footer    x000D    x000D   footer   x000D     position absolute  x000D     bottom 0  x000D     width 100   x000D     height 60px       Height of the footer    x000D     background  6cf  x000D    x000D   lt div id  container  gt  x000D      lt div id  header  gt header lt  div gt  x000D      lt div id  body  gt body lt  div gt  x000D      lt div id  footer  gt footer lt  div gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

Yet  another really simple solution is this one   html  body       height  100       width  100       margin  0      display  table     footer       background-color  grey      display  table-row      height  0      jsFiddle  The trick is to use a display table for the whole document and display table-row with height 0 for the footer   Since the footer is the only body child that has a display as table-row  it is rendered at the bottom of the page

User · Answer

A very simple flex solution that does not assume fixed heights or changing position of elements   HTML   lt div class  container  gt     lt header gt  lt  header gt     lt main gt  lt  main gt     lt footer gt  lt  footer gt   lt  div gt    CSS   container     display  flex    flex-direction  column    min-height  100vh     main     flex  1        Browser Support  All major browsers  except IE11 and below   Make sure to use Autoprefixer for appropriate prefixes    x000D   x000D   container   x000D    display  -webkit-box  x000D    display  -ms-flexbox  x000D    display  flex  x000D    -webkit-box-orient  vertical  x000D    -webkit-box-direction  normal  x000D    -ms-flex-direction  column  x000D    flex-direction  column  x000D    min-height  100vh  x000D    x000D   x000D  main   x000D    -webkit-box-flex  1  x000D    -ms-flex  1  x000D    flex  1  x000D    x000D   x000D                                                x000D   x000D  body  x000D  html   x000D      margin  0  x000D      padding  0  x000D    x000D   x000D  header  x000D  main  x000D  footer   x000D    margin  0  x000D    display  block  x000D    x000D   x000D  header  x000D  footer   x000D    min-height  80px   x000D    x000D   x000D  header   x000D    background-color   ccc  x000D    x000D   x000D  main   x000D    background-color   f4f4f4  x000D    x000D   x000D  footer   x000D    background-color  orange  x000D    x000D   lt div class  container  gt  x000D     lt header gt  lt  header gt  x000D     lt main gt  lt  main gt  x000D     lt footer gt  lt  footer gt  x000D   lt  div gt  x000D   x000D   x000D

User · Answer

here is my two cents  In comparisson to other solutions  one does not need to add extra containers  Therefor this solution is a bit more elegant  Beneath the code example i ll explain why this works    lt  DOCTYPE html gt   lt html gt       lt head gt           lt meta charset  UTF-8  gt           lt title gt test lt  title gt           lt style gt               html                               height 100                              body                               min-height 100                   padding 0    not needed  but otherwise header and footer tags have padding and margin                   margin 0    see above comment                              body                               position relative                  padding-bottom 60px     Same height as the footer                                           footer                               position absolute                  bottom 0px                  height  60px                   background-color  red                          lt  style gt       lt  head gt       lt body gt           lt header gt header lt  header gt             lt footer gt footer lt  footer gt       lt  body gt   lt  html gt    So the first thing we do  is make the biggest container  html   100   The html page is as big as the page itself  Next we set the body height  it can be bigger than the 100  of the html tag  but it should at least be as big  therefore we use min-height 100     We also make the body relative  Relative means you can move the block element around relative from its original position  We don t use that here though  Because relative has a second use  Any absolute element is either absolute to the root  html  or to the first relative parent grandparent  That s what we want  we want the footer to be absolute  relative to the body  namely the bottom    The last step is to set the footer to absolute and bottom 0  which moves it to the bottom of the first parent grandparent that is relative   body ofcourse     Now we still have one problem to fix  when we fill the complete page  the content goes beneath the footer  Why  well  because the footer is no longer inside the  html flow   because it is absolute  So how do we fix this  We will add padding-bottom to the body  This makes sure the body is actually bigger than it s content    I hope i made a lot clear for you guys

User · Answer

Just customize the footer section   footer       position  fixed     bottom  0     width  100      padding  1rem     text-align  center             lt div class  footer  gt     Footer is always bootom   lt  div gt

User · Answer

footer     margin-top calc 5    60px       This works fine

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

ONE line solution using Bootstrap Apart from all the CSS and jQuery solutions provided  I have listed a solution using Bootstrap with a single class declaration on body tag  d-flex flex-column justify-content-between  This DOES NOT require knowing the height of the footer ahead of time  This DOES NOT require setting position absolute  This WORKS with dynamic divs that overflow on smaller screens    x000D   x000D  html  body     height  100     x000D   lt html gt        lt head gt         lt link rel  stylesheet  href  https   stackpath bootstrapcdn com bootstrap 4 5 0 css bootstrap min css  integrity  sha384-9aIt2nRpC12Uk9gS9baDl411NQApFmC26EwAOH8WgZl5MYYxFfc NcPb1dKGj7Sk  crossorigin  anonymous  gt       lt  head gt        lt body class  d-flex flex-column justify-content-between text-white text-center  gt            lt header class  p-5 bg-dark  gt             lt h1 gt Header lt  h1 gt           lt  header gt           lt main class  p-5 bg-primary  gt             lt h1 gt Main lt  h1 gt           lt  main gt           lt footer class  p-5 bg-warning  gt             lt h1 gt Footer lt  h1 gt           lt  footer gt            lt script src  https   code jquery com jquery-3 5 1 slim min js  integrity  sha384-DfXdz2htPH0lsSSs5nCTpuj zy4C OGpamoFVy38MVBnE IbbVYUew OrCXaRkfj  crossorigin  anonymous  gt  lt  script gt           lt script src  https   cdn jsdelivr net npm popper js 1 16 0 dist umd popper min js  integrity  sha384-Q6E9RHvbIyZFJoft 2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo  crossorigin  anonymous  gt  lt  script gt           lt script src  https   stackpath bootstrapcdn com bootstrap 4 5 0 js bootstrap min js  integrity  sha384-OgVRvuATP1z7JjHLkuOU7Xw704 h835Lr 6QL9UvYjZE3Ipu6Tp75j7Bh kR0JKI  crossorigin  anonymous  gt  lt  script gt       lt  body gt    lt  html gt  x000D   x000D   x000D

User · Answer

One thing to be wary of is mobile devices  since they implement the idea of the viewport in an  unusual  way   http   developer apple com library ios  documentation AppleApplications Reference SafariWebContent UsingtheViewport UsingtheViewport html   apple ref doc uid TP40006509-SW25  As such  using position  fixed   as i ve seen recommended in other places  usually isn t the way to go  Of course  it depends upon the exact behaviour you re after   What I ve used  and has worked well on desktop and mobile  is    lt body gt       lt div id  footer  gt  lt  div gt   lt  body gt    with  body       position  absolute      top  0      bottom  0      left  0      right  0      padding  0      margin  0      footer       position  absolute      bottom  0

User · Answer

What about that    lt div style  min-height  100vh   gt    content  lt  div gt    lt footer gt   copyright blah blah  lt  footer gt

[css] CSS to make HTML page footer stay at bottom of the page with a minimum height, but not overlap the page

Examples related to css

Examples related to footer