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

问题

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

回答1:

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

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

回答2:

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

回答3:

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

回答4:

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.

回答5:

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

回答6:

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

来源：https://stackoverflow.com/questions/28128400/keep-footer-at-the-bottom-of-the-page-with-scrolling-if-needed