Fix footer to bottom of page

Question

Although most pages on my site have enough content to push the footer to the bottom of the page for most people  I would like to know it s always fixed to the bottom regardless of screen size from now on anyway   I ve tried a number of ways such as bottom  0x  position absolute  etc  Never seems to work very well  occasionally pushes the footer out of its container to fix to the bottom using some of those examples right there   Included is the HTML and CSS for the two parts of the footer  footer  amp  copyright bar   They re both inside of a  lt section id  footer  gt  div anyway   I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend   Live URL - http   www mangdevelopment co uk nakedradish   It s a resturant website  Don t worry about the word  naked     HTML   lt section id  footer  gt     lt div class  container  gt       lt div class  row  gt         lt div class  span1  gt           lt div id  small-logo  gt             lt img src  img small-logo png    gt           lt  div gt         lt  div gt         lt div class  span2  gt           lt div class  footer-list  gt             lt h6 gt OUR BOXES lt  h6 gt             lt ul gt               lt a href     gt                 lt li gt Classic Box lt  li gt               lt  a gt               lt a href     gt                 lt li gt Vegetarian Box lt  li gt               lt  a gt               lt a href     gt                 lt li gt Family Box lt  li gt               lt  a gt               lt a href     gt                 lt li gt Dinner Party Box lt  li gt               lt  a gt               lt a href     gt                 lt li gt Gift Box lt  li gt               lt  a gt             lt  ul gt           lt  div gt         lt  div gt         lt div class  span2  gt           lt div class  footer-list  gt             lt h6 gt OUR RECIPES lt  h6 gt             lt ul gt               lt a href     gt                 lt li gt Last Weeks Feature lt  li gt               lt  a gt               lt a href     gt                 lt li gt Next Weeks Feature lt  li gt               lt  a gt             lt  ul gt           lt  div gt         lt  div gt         lt div class  span2  gt           lt div class  footer-list  gt             lt h6 gt ABOUT US lt  h6 gt             lt ul gt               lt a href     gt                 lt li gt The Food lt  li gt               lt  a gt               lt a href     gt                 lt li gt How We Sourcex lt  li gt               lt  a gt               lt a href     gt                 lt li gt Sustainability lt  li gt               lt  a gt               lt li gt  lt a href  about html  gt About Us lt  a gt  lt  li gt               lt a href     gt                 lt li gt Contact Us lt  li gt               lt  a gt             lt  ul gt           lt  div gt         lt  div gt         lt div class  span5  gt           lt div id  twitter  gt             lt img src  img twitter-logo png  alt    title    height  50  width  50  class  twitter-logo    gt             lt div class  tweet-bg  gt               lt div class  tweets  gt                 lt p gt  chefallanp that s just not on really lt  p gt               lt  div gt               lt div id  follow-btn  gt                 lt img src  img follow-us jpg    gt               lt  div gt             lt  div gt           lt  div gt           lt div class  checkout-options  gt             lt h6 gt SECURE CHECKOUT lt  h6 gt             lt ul gt               lt li gt  lt img src  img solo-logo png    gt  lt  li gt               lt li gt  lt img src  img switch-logo png    gt  lt  li gt               lt li gt  lt img src  img maestro-logo png    gt  lt  li gt               lt li gt  lt img src  img visa-logo png    gt  lt  li gt               lt a href     gt                 lt li gt  lt img src  img facebook-logo png    gt  lt  li gt               lt  a gt               lt a href     gt                 lt li gt  lt img src  img twitter-logo-flat png    gt  lt  li gt               lt  a gt             lt  ul gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt     lt div id  copyright-bar  gt     lt div class  container  gt       lt div class  row  gt         lt div class  copyright-content  gt           lt div class  span4  gt             lt p gt The Naked Radish Limited  2013 All rights reserved  lt  p gt           lt  div gt           lt div class  span4 offset4  gt             lt div class  copyright-list  gt               lt ul gt                 lt a href  terms html  gt                   lt li gt Terms  amp amp  Conditions lt  li gt                 lt  a gt                 lt a href  privacy html  gt                   lt li gt  - Privacy Policy lt  li gt                 lt  a gt                 lt a href     gt                   lt li gt  - Cookie Policy lt  li gt                 lt  a gt               lt  ul gt             lt  div gt           lt  div gt         lt  div gt       lt  div gt     lt  div gt   lt  section gt    CSS    footer       background-color   F3F3F3      padding-top  10px      padding-bottom  0px

User · Answer

Using Flex and Bootstrap4  if you don t use Bootstrap4  you can achieve the same result using the flex properties    lt body class  d-flex flex-column  gt       lt div gt Header lt  div gt       lt div gt Main container lt  div gt       lt div class  mt-auto  gt Footer lt  div gt   lt  body gt

User · Answer

The Footer be positioned at the bottom of the page  but not fixed   CSS  html     height  100      body     position  relative    margin  0    min-height  100       padding  0     header     background   595959    height  90px     footer     position  absolute    bottom  0    width  100     height  90px    background-color   595959      HTML   lt html gt      lt head gt  lt  head gt      lt body gt                 lt div id  header  gt  lt  div gt         lt div id  content  gt  lt  div gt         lt div id  footer  gt  lt  div gt           lt  body gt   lt  html gt

User · Answer

CSS  html       height 100     body       min-height 100   position relative     footer       background-color  rgb 200 200 200       height  115px      position absolute  bottom 0px     footer-ghost   height 115px      HTML   lt div class  header  gt     lt  div gt   lt div class  content  gt     lt  div gt   lt div class  footer  gt  lt  div gt   lt div class  footer-ghost  gt  lt  div gt

User · Answer

Like this add position fixed  and bottom 0  below the selector  footer   demo  CSS   footer       background-color   F3F3F3      padding-top  10px      padding-bottom  0px      position fixed      bottom 0      width 100

User · Answer

We can use FlexBox for Sticky Footer and Header without using POSITIONS in CSS    x000D   x000D   container   x000D    display  flex  x000D    flex-direction  column  x000D    height  100vh  x000D    x000D   x000D  header   x000D    height  50px  x000D    flex-shrink  0  x000D    background-color   037cf5  x000D    x000D   x000D  footer   x000D    height  50px  x000D    flex-shrink  0  x000D    background-color   134c7d  x000D    x000D   x000D  main   x000D    flex  1 0 auto  x000D    x000D   lt div class  container  gt  x000D     lt header gt HEADER lt  header gt  x000D     lt main class  content  gt  x000D   x000D     lt  main gt  x000D     lt footer gt FOOTER lt  footer gt  x000D   lt  div gt  x000D   x000D   x000D    DEMO - JSFiddle  Note   Check browser supports for FlexBox  caniuse

User · Answer

A very simple example that shows how to fix the footer at the bottom in your application s layout    x000D   x000D     Styles go here    x000D  html  height  100    x000D  body  min-height  100   background   fff   x000D   page-layout  border  none  width  100   height  100vh    x000D   page-layout td  vertical-align  top    x000D   page-layout  header  background   aaa    x000D   page-layout  main-content  height  100   background   f1f1f1  text-align  center  padding-top  50px    x000D   page-layout  main-content  container  text-align  center  padding-top  50px    x000D   page-layout  footer  background   333  color   fff     x000D   lt  DOCTYPE html gt  x000D   lt html gt  x000D   x000D     lt head gt  x000D       lt link data-require  bootstrap    data-semver  4 0 5  rel  stylesheet  href  https   maxcdn bootstrapcdn com bootstrap 4 0 0-alpha 6 css bootstrap min css    gt  x000D       lt link rel  stylesheet  href  style css    gt  x000D       lt script src  script js  gt  lt  script gt  x000D     lt  head gt  x000D   x000D     lt body gt  x000D       lt table class  page-layout  gt  x000D         lt tr gt  x000D           lt td class  header  gt  x000D             lt div gt  x000D              This is the site header  x000D             lt  div gt  x000D           lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td class  main-content  gt  x000D             lt div gt  x000D               lt h1 gt Fix footer always to the bottom lt  h1 gt  x000D               lt div gt  x000D                This is how you can simply fix the footer to the bottom  x000D               lt  div gt  x000D               lt div gt  x000D                The footer will always stick to the bottom until the main-content doesn t grow till footer  x000D               lt  div gt  x000D               lt div gt  x000D                Even if the content grows  the footer will start to move down naturally as like the normal behavior of page  x000D               lt  div gt  x000D             lt  div gt  x000D           lt  td gt  x000D         lt  tr gt  x000D         lt tr gt  x000D           lt td class  footer  gt  x000D             lt div gt  x000D              This is the site footer  x000D             lt  div gt  x000D           lt  td gt  x000D         lt  tr gt  x000D       lt  table gt  x000D     lt  body gt  x000D   x000D   lt  html gt  x000D   x000D   x000D

User · Answer

Your footer element won t inherently be fixed to the bottom of your viewport unless you style it that way So if you happen to have a page that doesn t have enough content to push it all the way down it ll end up somewhere in the middle of the viewport  looking very awkward and not sure what to do with itself  like my first day of high school    Positioning the element by declaring the fixed rule is great if you always want your footer visible regardless of initial page height - but then remember to set a bottom margin so that it doesn t overlay the last bit of content on that page  This becomes tricky if your footer has a dynamic height  which is often the case with responsive sites since it s in the nature of elements to stack   You ll find a similar problem with absolute positioning  And although it does take the element in question out of the natural flow of the document  it still won t fix it to the bottom of the screen should you find yourself with a page that has little to no content to flesh it out   Consider achieving this by     Declaring a height value for the  lt body gt   amp   lt html gt  tags Declaring a minimum-height value to the nested wrapper element  usually the element which wraps all your descendant elements contained within the body structure  this wouldn t include your footer element    Code Pen Example   x000D   x000D      addBodyContent   on  click   function     x000D        lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Vestibulum tortor quam  feugiat vitae  ultricies eget  tempor sit amet  ante  Donec eu libero sit amet quam egestas semper  Aenean ultricies mi vitae est  Mauris placerat eleifend leo  lt  p gt    appendTo   flex-col first-of-type    x000D      x000D   x000D      resetBodyContent   on  click   function     x000D        flex-col p   remove    x000D      x000D   x000D      addFooterContent   on  click   function     x000D        lt p gt Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas  Vestibulum tortor quam  feugiat vitae  ultricies eget  tempor sit amet  ante  Donec eu libero sit amet quam egestas semper  Aenean ultricies mi vitae est  Mauris placerat eleifend leo  lt  p gt    appendTo  footer    x000D      x000D   x000D      resetFooterContent   on  click   function     x000D       footer p   remove    x000D      x000D  html  body   x000D      height  91   x000D    x000D   x000D   wrapper   x000D      width  100   x000D      left  0  x000D      right  0  x000D      box-sizing  border-box  x000D      padding  10px  x000D      display  block  x000D      min-height  100   x000D    x000D   x000D  footer   x000D      background  black  x000D      text-align  center  x000D      color  white  x000D      box-sizing  border-box  x000D      padding  10px  x000D    x000D   x000D   flex   x000D      display  flex  x000D      height  100   x000D    x000D   x000D   flex-col   x000D      flex  1 1  x000D      background   ccc  x000D      margin  0px 10px  x000D      box-sizing  border-box  x000D      padding  20px  x000D    x000D   x000D   flex-btn-wrapper   x000D      display  flex  x000D      justify-content  center  x000D      flex-direction  row  x000D    x000D   x000D   btn   x000D      box-sizing  border-box  x000D      padding  10px  x000D      transition   7s  x000D      margin  10px 10px  x000D      min-width  200px  x000D    x000D   x000D   btn hover   x000D      background  transparent  x000D      cursor  pointer  x000D    x000D   x000D   dark   x000D      background  black  x000D      color  white  x000D      border  3px solid black  x000D    x000D   x000D   light   x000D      background  white  x000D      border  3px solid white  x000D    x000D   x000D   light hover   x000D      color  white  x000D    x000D   x000D   dark hover   x000D      color  black  x000D    x000D   lt script src  https   ajax googleapis com ajax libs jquery 2 1 1 jquery min js  gt  lt  script gt  x000D   lt div class  wrapper  gt  x000D       lt div class  flex-btn-wrapper  gt  x000D           lt button id  addBodyContent  class  dark btn  gt Add Content lt  button gt  x000D           lt button id  resetBodyContent  class  dark btn  gt Reset Content lt  button gt  x000D       lt  div gt  x000D       lt div class  flex  gt  x000D       lt div class  flex-col  gt  x000D        lorem ipsum dolor    x000D       lt  div gt  x000D       lt div class  flex-col  gt  x000D        lorem ipsum dolor    x000D       lt  div gt  x000D       lt  div gt  x000D       lt  div gt  x000D   lt footer gt  x000D       lt div class  flex-btn-wrapper  gt  x000D           lt button id  addFooterContent  class  light btn  gt Add Content lt  button gt  x000D           lt button id  resetFooterContent  class  light btn  gt Reset Content lt  button gt  x000D       lt  div gt  x000D      lorem ipsum dolor    x000D   lt  footer gt  x000D   x000D   x000D

User · Answer

I ve found the sticky footer solution a bit painful on responsive sites  given that the height of your nav and footer can differ depending on the device  If you only care about working on modern browsers  you can accomplish your goal using a bit of Javascript   If this is your HTML    lt div class  nav  gt   lt  div gt   lt div class  wrapper  gt   lt  div gt   lt div class  footer  gt   lt  div gt    Then use this JQuery on every page     function          Sets the minimum height of the wrapper div to ensure the footer reaches the bottom      function setWrapperMinHeight             wrapper   css  minHeight   window innerHeight -     nav   height   -     footer   height              Make sure the main div gets resized on ready      setWrapperMinHeight          Make sure the wrapper div gets resized whenever the screen gets resized      window onresize   function         setWrapperMinHeight

User · Answer

Set   html  body       height  100       Wrap the entire content before the footer in a div    wrapper       height auto  important      min-height 100       You can adjust min-height as you like based on how much of the footer you want to show in the bottom of the browser window  If set it to 90   10  of the footer will show before scrolling

User · Answer

You can use Grid Layout  It is newer than Flexbox  and less supported in browsers   Check it out   HTML   lt body gt     lt div class  content  gt      content    lt  div gt     lt footer class  footer  gt  lt  footer gt   lt  body gt    CSS  html     height  100      body     min-height  100     display  grid    grid-template-rows  1fr auto         footer     grid-row-start  2    grid-row-end  3      Useful Links   Browser Supoort  Can I Use - Grid Layout  Complete Guide  Grid Laoyut Guid

User · Answer

My solution   html  body     min-height  100     body     padding-bottom  88px     footer     position  absolute    bottom  0    width  100     height  88px

User · Answer

This code working for me   footer      background-color   333      color   EEE      padding  20px      left  0      width  100       bottom  0      position  fixed     Important thing you should added bottom 0  and position  fixed

User · Answer

For your footer    footer       position  fixed      height  50px      background-color  red      bottom  0px      left  0px      right  0px      margin-bottom  0px      For your body   body       margin-bottom 50px       x000D   x000D   footer   x000D    background-color  red  x000D    position  fixed  x000D    bottom  0px  x000D    left  0px  x000D    right  0px  x000D    height  50px  x000D    margin-bottom  0px  x000D    x000D   x000D  div   x000D    margin  20px 20px  x000D    x000D   x000D  body   x000D    margin-bottom  50px  x000D    x000D   lt div gt  x000D    Although most pages on my site have enough content to push the footer to the bottom of the page for most people  I would like to know it s always fixed to the bottom regardless of screen size from now on anyway  I ve tried a number of ways such as bottom  x000D    0x  position absolute  etc  Never seems to work very well  occasionally pushes the footer out of it s container to fix to the bottom using some of those examples right there  Included is the HTML and CSS for the two parts of the footer  footer  amp  copyright x000D    bar   They re both inside of a div anyway  I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend  Although most pages on my site have enough content to push the footer to the x000D    bottom of the page for most people  I would like to know it s always fixed to the bottom regardless of screen size from now on anyway  I ve tried a number of ways such as bottom  0x  position absolute  etc  Never seems to work very well  occasionally x000D    pushes the footer out of it s container to fix to the bottom using some of those examples right there  Included is the HTML and CSS for the two parts of the footer  footer  amp  copyright bar   They re both inside of a div anyway  I removed my attempts x000D    at getting it to stick so people can have a look at it right now and see what the current code is to amend  Although most pages on my site have enough content to push the footer to the bottom of the page for most people  I would like to know it s always x000D    fixed to the bottom regardless of screen size from now on anyway  I ve tried a number of ways such as bottom  0x  position absolute  etc  Never seems to work very well  occasionally pushes the footer out of it s container to fix to the bottom using x000D    some of those examples right there  Included is the HTML and CSS for the two parts of the footer  footer  amp  copyright bar   They re both inside of a div anyway  I removed my attempts at getting it to stick so people can have a look at it right now and x000D    see what the current code is to amend  Although most pages on my site have enough content to push the footer to the bottom of the page for most people  I would like to know it s always fixed to the bottom regardless of screen size from now on anyway  x000D    I ve tried a number of ways such as bottom  0x  position absolute  etc  Never seems to work very well  occasionally pushes the footer out of it s container to fix to the bottom using some of those examples right there  Included is the HTML and CSS for x000D    the two parts of the footer  footer  amp  copyright bar   They re both inside of a div anyway  I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend  Although most pages on my site x000D    have enough content to push the footer to the bottom of the page for most people  I would like to know it s always fixed to the bottom regardless of screen size from now on anyway  I ve tried a number of ways such as bottom  0x  position absolute  etc  x000D    Never seems to work very well  occasionally pushes the footer out of it s container to fix to the bottom using some of those examples right there  Included is the HTML and CSS for the two parts of the footer  footer  amp  copyright bar   They re both inside x000D    of a div anyway  I removed my attempts at getting it to stick so people can have a look at it right now and see what the current code is to amend  Although most pages on my site have enough content to push the footer to the bottom of the page for most x000D    people  I would like to know it s always fixed to the bottom regardless of screen size from now on anyway  I ve tried a number of ways such as bottom  0x  position absolute  etc  Never seems to work very well  occasionally pushes the footer out of it s x000D    container to fix to the bottom using some of those examples right there  Included is the HTML and CSS for the two parts of the footer  footer  amp  copyright bar   They re both inside of a div anyway  I removed my attempts at getting it to stick so people x000D    can have a look at it right now and see what the current code is to amend  x000D   lt  div gt  x000D   lt div id  footer  gt  x000D    This is footer x000D   lt  div gt  x000D   x000D   x000D    jsFiddle Demo

User · Answer

Here s a simple CSS solution that ll work    fix-footer      position  fixed      left  0px      bottom  0px      height  35px      width  100       background   1abc9c

[html] Fix footer to bottom of page

Examples related to html

Examples related to css

Examples related to footer