无法在Webkit中创建屏幕的div填充宽度（chrome和safari）

Question

我有一个div想要用作页脚，并让它填满页面的整个宽度。到目前为止，你会想到这么简单。而且，它是在 Firefox 和IE中。

不幸的是，在两个主要的webkit浏览器中，尽管我的页脚（#footer）设置为width:100%; max-width:none;，但webkit不会填充浏览器窗口的宽度。

页面位于：page demonstrating problem

发生了什么？任何解决方案？

编辑：道歉所有 - 当我说它在Safari中工作时，这是一个错字 - 我的意思是firefox。

截图：

这是在IE中工作：

此处它在Chrome中被破坏（在Safari中也是如此）。箭头是手绘的，用于强调。

Answer 1

您的问题可能是页脚有一些父元素position:设置为任何内容。这会创建所谓的堆叠上下文。如果您将页脚放在正文或整个视口大小的元素内，那么100％将真正是视口的100％。

编辑：显然这不是你的答案，通常是99％的案例中的答案，所以我把它作为参考。

Answer 2

我运行Chrome，它对我来说很好用。你能发布截图吗？

除此之外，你的内容有点偏，所以这里有一个解决方法：

#body-row {
  padding-left: 200px;
}

Answer 3

事实证明，没有评论的以下行导致了问题：

#footer {  position: fixed;  bottom:0; left: 0; /*max-width: 11400px; max-width: none; width: 11400px;*/ width: 100%;  height:75pt;}

出于某种原因，WebKit看到max-width: 11400px; max-width: none; width: 11400px;并将宽度设置为屏幕大小的一半。

Answer 4

你有一个拼写错误：width:100%;

编辑：错字现在似乎已修复

Answer 5

在

#footer {
max-width:none;
}

这不是有效的减速，因为它无效，被

覆盖

.row {
max-width: 1140px;
}

解决：

变化

#footer{
max-width:100%
}

完成！

Answer 6

position:fixed上的#footer导致了这一点。

你在Firefox中使用Firebug吗？这将有助于您更快地进行调试。另外，考虑使用像960gs这样的框架和Paul Irish的HTML5 Boilerplate作为构建的良好基础。