Question

我的页面底部有一个115px的图像。我在网上搜索如何让它始终保持在页面底部，并得到了很多复杂的答案。我使用自己的代码制作了（至少在我的浏览器中）。我意识到这可能是一种不成熟的方式，并希望看看它是否存在任何潜在的问题。这是我的代码

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

Answer 1

以下是页面底部始终如何处理页脚的方法。您可以将footer替换为<div id="footer">...</div>，但我更喜欢HTML5 footer。

enter image description here

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

Answer 2

您可能想要考虑如果正文文本与视口高度一样长会发生什么。文本可能会在固定页脚后面，您可能无法看到它

我会建议;

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

然后确保给div包装所有内容的填充底部与页脚的高度相同。

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

如何将页脚始终保持在页面底部？

2 个答案: