页脚定位答案

【问题标题】：footer positioning页脚定位
【发布时间】：2012-01-12 23:34:09
【问题描述】：

我想将页脚放置在距屏幕底部大约 20 到 30 像素或一个百分比的位置。从带有 * {outline:solid 1px} 的元素来看，屏幕底部有一个矩形，它必须是 html 元素或标记 body 的底部边界。我对定位元素有点模糊，尽管玩过各种定位选项，但无法将页脚放在我想要的位置。这里的最佳做法是什么？我应该如何定位页脚？

【问题讨论】：

您是指在内容的底部（在所有内容的下方）还是在屏幕的底部？这些是不同类型的定位

标签： html css positioning footer

【解决方案1】：

如果您希望它位于文档的底部（+30px）

footer{
   position:absolute;
   bottom:30px;
}

如果你想把它放在文档的底部，你需要 javascript 来计算窗口的高度

然后做类似（在 jquery 中）

$('footer').css({'position':'fixed','top':$(window).height()-$('footer').height()});

或者只有 CSS 你也可以这样做：

.footer{
    position:fixed;
    height:2%;
    top:98%;
}

【讨论】：

【解决方案2】：

没有看到您的任何代码，很难想象为什么事情不适合您。但我的第一个猜测是您没有正确设置 body 元素的样式。默认情况下，许多现代浏览器对正文应用某种填充或边距。因此，您应该使用以下规则来重置它：

body { margin: 0; padding: 0; }

这将重置默认设置，让您可以按照自己的意愿继续操作。你也可以使用position: fixed CSS 规则来处理你想要固定在屏幕底部的元素。示例：

#footer { position: fixed; bottom: 0; height: 30px; }

【讨论】：