可以将文章内容翻译成中文,广告屏蔽插件可能会导致该功能失效(如失效，请关闭广告屏蔽插件后再试):

问题:

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>