Footer position - bottom and center [duplicate]

问题:

This question already has an answer here:

• How to make a footer fixed in the page bottom 8 answers

I am writing a webpage with a fixed footer on the bottom of the page. The content of the page has a specific width and is centered. The footer also has a specific width and must be centered.

Issues:

1. I cant use postiton: fixed - footer is not centered
2. Page content is loaded dynamically from a database, so I can't know the exact height
3. If the browser window is very small, the footer hits the content and covers it. A z-index hardly fixes it because I have a gradient on the background set like a body background.

So I would need something like float: bottom....

回答1:

Take a look at this tutorial. I believe this might be what you are looking for. The footer is fixed, and takes the height of the div above it into consideration (as to not overlap) Once you visit this page, resize the window to see what I'm talking about.

http://ryanfait.com/sticky-footer/

回答2:

Although the other answers do work, you should avoid using negative margins.

Try this:

.footerholder {
    background: none repeat scroll 0 0 transparent;
    bottom: 0;
    position: fixed;
    text-align: center;
    width: 100%;
}

.footer {
    background: none repeat scroll 0 0 blue;
    height: 100px;
    margin: auto;
    width: 400px;
}

And the HTML would be:

<div class="footerholder">
    <div class="footer">
    ....
    </div>
</div>

---------- Edit ------------

You should also ammend your over all page size, as to take into consideration the height of your footer - otherwise you will never see the bottom content

回答3:

.footer{
    position:fixed;
    bottom:0;
    left:50%;
    margin-left:-200px; /*negative half the width */
    background:red;
    width:400px;
    height:100px;
}

Check working example at http://jsfiddle.net/qdVbR/