页脚定位

Question

我想将我的页脚放置在距离屏幕底部大约20 - 30px或百分比的位置。从* {outline：solid 1px}查看元素时，屏幕底部有一个矩形，它必须是html元素或标记正文的底部边界。我对定位元素有些朦胧，尽管已经玩过varius定位选项无法将页脚放到我想要的位置。这里的最佳做法是什么？我该如何定位页脚？

Answer 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%;
}

Answer 2

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

body { margin: 0; padding: 0; }

这将重置默认值，允许您按照自己的意愿继续操作。您还可以将position: fixed CSS规则用于要固定到屏幕底部的元素。例如：

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