html - 如何使页脚始终位于页面底部？

我在页面的最底部有一张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>

最佳答案

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

我会建议；

#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 */