页脚定位

我想将页脚定位在距屏幕底部约20-30像素或百分比处。通过查看具有* {outline：solid 1px}的元素，沿着屏幕底部有一个矩形，它必须是html元素或者标记正文的底部边界。我对定位元素有点朦胧，尽管玩过varius定位选项，却无法将页脚找到我想要的位置。这里最好的做法是什么？我应该如何定位页脚？页脚定位

来源

2012-01-12 Doug Fir

您的意思是在内容的底部（低于一切）还是在屏幕的底部？这些是不同类型的定位 – Ktash 2012-01-12 15:03:49

如果你想让它在文档

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

的底部（+ 30像素），如果你想让它在文档的底部，你需要JavaScript来计算窗口的高度

，并完成类似（jQuery中）

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

或者是仅含有C SS你也可以这样做：

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

来源

2012-01-12 15:14:53

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

body { margin: 0; padding: 0; }

这将重置默认设置，让您继续，只要你喜欢。您也可以对要固定到屏幕底部的元素使用position: fixed CSS规则。例如：

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

来源

2012-01-12 15:16:39

回答

相关问题