Sticky Footer failure | 易学教程

问题

I am trying to get my footer correct but am having issues. I was able to keep the footer down at the bottom of the page but then soon realized that when the window is made small, it ends up covering content. I can fix this by taking away position:absolute BUT the footer no longer stays at the bottom of the page if I do this.

I've tried a lot of different things to get this to work, but this is what I am currently looking at, I am hoping someone could lend some advice here..

CSS code:

html, body {
    margin: 0;
    padding: 0;     
    height:100%;
}
#wrapper {
    width:900px;
    background-color:#FAFAFA;
    min-height:100%;
    margin:0 auto -45px;
    height: auto !important;
    height:100%;
}
#content{
    margin-top:40px;
    float: left;
    padding-left:100px;
    padding-bottom:30px;
    overflow:auto;  
}
#footer{
    height:30px;
    bottom:0;
    background:#D2CFCF;
    width:900px;
    clear:both;
    position:absolute;
}

I recently tried margin-top:-30px in the footer, and position:relative. With the code above, the footer is nice and seated on the bottom but covers content when the window is made small. What can I do?

The HTML is basically as follows

<body>
    <div id="wrapper">
        <div id="content">
        </div>
        <div id="footer">
        </div>
    </div>
</body>

回答1:

Use a position: fixed; rule on the footer and a bottom margin on the <body> tag.

http://jsfiddle.net/JGUYh/

BODY {
 margin: 0 0 60px 0; /* keep regular content clear of the footer */
}
#footer {
 position: fixed;
 width: 100%;
 height: 50px;
 bottom: 0px;
 background: #ccc;
 overflow: hidden;
}

Note that depending on the window size the footer will cover the content sometimes. But scrolling will reveal any hidden content.

来源：https://stackoverflow.com/questions/12271378/sticky-footer-failure

标签

css

footer