无法在 Webkit（chrome 和 safari）中使 div 填充屏幕的宽度答案

【问题标题】：Can't make div fill width of screen in Webkit (chrome and safari)无法在 Webkit（chrome 和 safari）中使 div 填充屏幕的宽度
【发布时间】：2011-08-08 20:35:35
【问题描述】：

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

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

页面在这里：page demonstrating problem

发生了什么事？有什么解决办法吗？

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

截图：

它在 IE 中运行：

它在 Chrome 中被破坏（在 Safari 中的行为相同）。为了强调，箭头是手绘的。

【问题讨论】：

是width:100; 还是width:100%？但是，我在 chrome 上测试了您的网站，它在那里工作。
这里也一样。截图就好了（你说的主要的 webkit 浏览器是什么意思？Safari 是 webkit，Chrome 也是，所以 webkit 似乎工作正常）。
Naveed - 道歉 - 这是 100%（省略 % 是问题中的错字）。
现在好像一切正常了？
@Blowski - 我将 CSS 修复如下。

标签： css google-chrome safari webkit cross-browser

【解决方案1】：

我运行 Chrome，它对我来说很好用。可以发个截图吗？

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

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

【讨论】：

【解决方案2】：

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

编辑：显然这不是你的答案，这只是 99% 情况下通常的答案，所以我将其包括在内以供参考。

【讨论】：

【解决方案3】：

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

#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; 并将宽度设置为屏幕大小的一半。

【讨论】：

【解决方案4】：

你有一个错字：width:100%;

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

【讨论】：

【解决方案5】：

在

#footer {
max-width:none;
}

这不是一个有效的减速，因为它是无效的，它被覆盖了

.row {
max-width: 1140px;
}

解决：

改变

#footer{
max-width:100%
}

完成！

【讨论】：

没有一个有效的最大宽度值：w3.org/TR/CSS21/visudet.html#propdef-max-width

【解决方案6】：

#footer 上的 position:fixed 导致了这种情况。

您在 Firefox 中使用 Firebug 吗？这将帮助您更快地进行调试。此外，还可以考虑将 960gs 之类的框架与 Paul Irish 的 HTML5 Boilerplate 一起用作构建的良好基础。

【讨论】：

它在 Firefox 和 IE 中运行良好，我想要 position:fixed 行为。我绝对不想使用固定宽度的布局，甚至不想使用具有最大宽度的“流动”布局。
960gs 有一个没有最大宽度的流体选项 - 您可以将 position:fixed 添加到容器中。 HTML5 Boilerplate 通过将所有浏览器重置为标准 CSS 来提供帮助，这有助于避免跨浏览器错误，以及许多其他最佳实践的东西来帮助你前进。您需要它来解决这个问题，但您可能会发现它加快了您的开发时间。