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.

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; }

score 22 · Accepted Answer · edited Sep 24 '17 at 03:37

22

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

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

edited Sep 24 '17 at 03:37

Kyle Higginson

922
6
11

answered Jan 24 '15 at 17:52

scmccarthy22

623
8
19

updated link for Ryan Fait sticky footer https://codepen.io/griffininsight/pen/OMexrW – Aaron Hoffman Jul 02 '17 at 15:59
this method worked nicely for me, but the page is not always "scrollable" – tryptofame Sep 04 '19 at 10:50
Great solution even in the end of 2019! Without flex and other nice features. Thanks! – nlavr Nov 25 '19 at 19:25
@tryptofame, according with an example -- no, not always scrollable. – nlavr Nov 25 '19 at 19:27

MAChitgarha · Answer 2 · 2021-05-07T20:38:38.270

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.

This should be at the top. Flexbox really does provide clean solutions +1 — Mohammad Faisal, Oct 04 '20 at 11:01

score 5 · Answer 3 · edited Jun 20 '20 at 09:12

5

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 -->
}

edited Jun 20 '20 at 09:12

Community

1
1

answered Jan 24 '15 at 18:51

Dustin Scott Garza

130
9

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. – Paul Jan 24 '15 at 18:57
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. – Dustin Scott Garza Jan 24 '15 at 19:08
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. – Giuseppe The Dreamer May 13 '20 at 22:37

deepak raghuwanshi · Answer 4 · 2019-10-31T08:12:59.013

3

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

edited Oct 31 '19 at 08:12

answered Oct 31 '19 at 07:33

deepak raghuwanshi

146
7

score 1 · Answer 5 · edited Feb 21 '17 at 15:01

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.

I like how the footer background goes all the way to the bottom on a short page. — Paul, Jan 27 '15 at 13:47

score 0 · Answer 6 · edited Feb 21 '17 at 15:03

0

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]-->

edited Feb 21 '17 at 15:03

Sir l33tname

4,026
6
38
49

answered Jan 24 '15 at 17:58

Parvez Rahaman

4,269
3
22
39

I've added your suggestions to the examples. I'm afraid that it didn't solve the problem on a long page. – Paul Jan 24 '15 at 18:21
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](http://jsfiddle.net/Dyna18/243x9s2o/) and for the [shortpage](http://jsfiddle.net/Dyna18/ozzuvrow/) – Paul Jan 24 '15 at 18:53

score 0 · Answer 7 · edited Feb 21 '17 at 14:57

0

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;
}

edited Feb 21 '17 at 14:57

Sir l33tname

4,026
6
38
49

answered Jan 24 '15 at 18:38

Parvez Rahaman

4,269
3
22
39

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. – Paul Jan 24 '15 at 18:41
2

This link is dead. – a2f0 Feb 22 '18 at 18:31

score 0 · Answer 8 · answered Sep 11 '20 at 05:16

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;
}

score 0 · Answer 9 · edited May 30 '22 at 18:26

0

position:fixed;
bottom:0;

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

edited May 30 '22 at 18:26

Halo

1,730
1
8
31

answered May 24 '22 at 07:17

MadNegi

1

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](/help/how-to-answer). – Community May 24 '22 at 07:33

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

9 Answers9

Short Page Edit

Linked