How to keep footer always at the bottom of a page?

问题

I have an image that is 115px that I want at the very bottom of my page. I searched online how to make it stay at the bottom of the page always and got a lot of complicated answers. I made with code of my own one that works (at least in my browser). I realize it might be an immature way to do it, and wanted to see if there were any potential problems with it. Here is my code

<div id="footer" style="position:fixed;top:100%;margin-top:-115px;left:0%;repeat:repeat-x;background:url(http://EXAMPLE.com/images/bottom-border.png);height:115px;width:100%;">
&nbsp;
</div>

回答1:

you may want to consider what will happen if the body text is as long as the viewport height. The text might go behind the fixed footer and you may not be able to see it

I would recommend;

#footer { 
    position: relative;
    margin-top: -150px; /* negative value of footer height */
    height: 150px;
    clear:both;
}

then make sure to give the div wrapping all the content has a padding bottom the same as the height of the footer.

#main { padding-bottom: 150px; }  /* must be same height as the footer */

回答2:

Here is how you do the footer always at the bottom of page. You can replace footer with <div id="footer">...</div>, but I prefer HTML5 footer.

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <style>
        body { height: 100%;}
        footer {background: url(http://cdn.sstatic.net/stackoverflow/img/sprites.png?v=5); 
                position: fixed; bottom: 0; left: 0; height:115px;width:100%; }
    </style>
</head>
<body>
    <footer>

    </footer>
</body>
</html>

来源：https://stackoverflow.com/questions/14960467/how-to-keep-footer-always-at-the-bottom-of-a-page

标签

html

css

footer