Keep footer at the bottom of the page (with scrolling if needed)

Question

I'm trying to show a footer at the bottom of my pages. And if the page is longer then 1 screen I like the footer to only show after scrolling to the bottom. So I can't use 'position: fixed', because then it will always show.

I'm trying to copy the following example: http://peterned.home.xs4all.nl/examples/csslayout1.html

However when I use the following, the footer is showing halfway my long page for some reason.

position: absolute; bottom:0 

I have both short pages and long pages and I would like it to be at the bottom of both of them.

How can I keep the footer at the bottom on a long page as well?

Fiddle

I've created these Fiddles to show the problem and test the code. Please post a working example with your solution.

• Short page

• Long page

My footer css:

html,body {
    margin:0;
    padding:0;
    height:100%; /* needed for container min-height */
}

.content {
    position:relative; /* needed for footer positioning*/
    margin:0 auto; /* center, not in IE5 */

    height:auto !important; /* real browsers */
    height:100%; /* IE6: treaded as min-height*/

    min-height:100%; /* real browsers */
}

/* --- Footer --- */
.footerbar {                                position: absolute;
                                            width: 100%;
                                            bottom: 0;

                                            color: white;
                                            background-color: #202020;
                                            font-size: 12px; }

a.nav-footer:link,
a.nav-footer:visited {                      color: white !important; }
a.nav-footer:hover, 
a.nav-footer:focus {                        color: black !important;
                                            background-color: #E7E7E7 !important; }

Brewmaster

Answer 1

I would suggest the "sticky footer" approach. See the following link:

http://css-tricks.com/snippets/css/sticky-footer/

Karie

updated link for Ryan Fait sticky footer codepen.io/griffininsight/pen/OMexrW – Falsify

this method worked nicely for me, but the page is not always "scrollable" – Loggins

Great solution even in the end of 2019! Without flex and other nice features. Thanks! – Vargas

@tryptofame, according with an example -- no, not always scrollable. – Vargas

Answer 2

Again, here's where flexboxes come with a clean hack: flex-grow.

First of all, let's see the code:

div#container {
  /* The power of flexboxes! */
  display: flex;
  display: -webkit-flex;
  flex-direction: column;

  min-height: 100vh;
}

div#container div#content {
  /* Key part: Eat the remaining space! */
  flex-grow: 1;
}

div#container footer {
  flex-basis: 100px;
}



/* Appearance, not important */
body {
  margin: 0;
  font-family: Fira Code;
}

@keyframes changeHeight {
  0% {height: 30px}
  10% {height: 30px}
  50% {height: 400px}
  60% {height: 400px}
  100% {height: 30px}
}

div, footer {
  color: white;
  text-align: center;
}

div#content section {
  background-color: blue;
  animation: changeHeight 10s infinite linear;
}

footer {
  background-color: indigo;
}

<div id="container">
  <div id="content">
    <!-- All other contents here -->
    <section>Main content</section>
  </div>
  <footer>
    Footer
    <!-- Footer content -->
  </footer>
</div>

If the content in #content cannot reach the footer, then flex-grow extends the element to fit the remaining space, as the #container has the minimum height of 100vh (i.e. the viewport height). Obviously, if the height of #content plus the footer exceeds the viewport height, #container will be scroll-able. This way, footer always remains at the very bottom.

The animation in the snippet, which belongs to a sample section inside #content, tries to show you the exact same thing: its height is changing between 30px and 400px (change it to a greater value if needed).

Also, for the sake of information, see the difference between flex-basis and height (or width).

Tip: In CSS3, if something does not work, take a look at flexboxes and grids. They often provide clean solutions.

Hope it helps.

Jockey

This should be at the top. Flexbox really does provide clean solutions +1 – Shostakovich

Answer 3

Replace Height with overflow:auto; & give body a position

html,body {
    position:relative; <!--Also give it a position -->
    margin:0;
    padding:0;
    overflow:auto; <!-- HERE -->
}

Position the footer to be relative to body

/* --- Footer --- */
.footerbar { 
    position: relative; <!-- HERE -->
    width: 100%;
    bottom: 0;
    color: white;
    background-color: #202020;
    font-size: 12px; 
}

It at all possible it is always better to relatively position your elements, especially your main elements, like footers in this case.

Short Page Edit

min-height:400px; <!-- Give this a real number like 400px 
                  or whatever you want...dont leave it to 100% as -->
}

Pekingese

What do you mean with give it a position? I don't see any change when using your suggestion. Please post the full code to make it work. Edit: I didn't see the footer yet. Now it works for the long page, however the short page is now having the problem. – Brewmaster

you do not need to use min-height and height....just use min-height, and give it a number ALSO might I add....dont worry about "ie6", I would worry more about mobile view. – Pekingese

I know that it is an old comment, but thank you! I had an issue with the footer not staying at the bottom, and then I realized that my body and container not even expanding no matter how big the content is. So I used overflow: auto; and it worked. – Buccinator

Answer 4

Now we have flex-box which is very straight forward.

 body {
        height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
    }

Note: we must contain only two div inside the body. One for footer and another for rest items

Selfpollination

Answer 5

We have been struggling with this issue for some time. The div with in several nested divs coupled with hacks and patches was turning into a nightmare for us. There were always surprises that required more hacks and more patches. here is what we have settled for:

css:

html, body  {
    margin: 0px;
    padding: 0px;
    height: 100%;
    color: #6f643a;
    font-family: Arial;
    font-size: 11pt; 
}

form {
   height: 100%;
}    

body:

<table style="z-index: 1; margin: 0px; left: 0px; top: 0px; overflow:auto" border="0"  width="100%" height="100%" cellspacing="0" cellpadding="0">
    <tr>
        <td valign="top" align="center" >
         contents goes here
        </td>
    </tr>
    <tr>
        <td valign="top" bgcolor="gray" align="center" style="padding:20px">
            <font color="#FFFF00">copyright:Puppy</font>
            footer goes here
        </td>
    </tr>
</table>

That is all you need. - if you are using asp.net don't ignore form height.

Bent

I like how the footer background goes all the way to the bottom on a short page. – Brewmaster

Answer 6

html,body {
    margin:0;
    padding:0;
    height:100%;
}
.content {
    padding:10px;
    padding-bottom:80px;   /* Height of the footer element */
}
.footerbar {
    width:100%;
    height:80px;
    position:absolute;
    bottom:0;
    left:0;
}

If IE7

<!--[if lt IE 7]>
<style type="text/css">
    .content { height:100%; }
</style>
<![endif]-->

Massenet

I've added your suggestions to the examples. I'm afraid that it didn't solve the problem on a long page. – Brewmaster

This indeed fixes the long page. However it creates a new problem for the short page. See these Fiddles that I made for the long page and for the shortpage – Brewmaster

Answer 7

There is an excellent footer tutorial here.

The demo page is here.

The basic premise is that the main body page is stretched to a 100% of the page. With a min-height of 100% too.

The footer is then given the following rules:

.footerbar {
    clear: both;
    position: relative;
    z-index: 10;
    height: 3em;
    margin-top: -3em;
}

Massenet

Now here's the thing. I think I've already got the min-height and height of 100% like they showed. However if you look at my long page, the footer isn't showing nice. – Brewmaster

This link is dead. – Witha

Answer 8

Putting "position" as "fixed" with the "bottom: 0" solved my problems. Now it is responsive, the footer appears correctly (and remains there even with scroll) on both bigger screens (pc, laptop) and smaller ones (smartphone).

.footerbar {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  position: fixed;
  bottom: 0;
  width: 100vw;
  min-height: 3vh;
}

Shiver

Answer 9

position:fixed;
bottom:0;

Add this on the footer if you want to make the footer on the bottom while scrolling.

Sanderling

As it’s currently written, your answer is unclear. Please edit to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers in the help center. – Failure