无法使 div 填充 Webkit 中屏幕的宽度（chrome 和 safari）
我有一个 div，我想将其用作页脚，并让它填充页面的整个宽度。到目前为止，你可能会想，这么简单。而且，在 Firefox 和 IE 中也是如此。
不幸的是，在两个主要的 webkit 浏览器中，尽管我的页脚 (#footer) 设置为 width:100%; max-width:none;，webkit不会让它填满浏览器窗口的宽度。
该页面位于：演示问题的页面
发生了什么？有什么解决办法吗？
编辑：向大家道歉 - 当我说它可以在 Safari 中运行时，那是一个拼写错误 - 我的意思是 Firefox。
屏幕截图：
这是在 IE 中运行的： 
这里它在 Chrome 中被破坏（Safari 中的行为相同）。为了强调，箭头是手绘的。 
I have a div that I want to use as the page footer, and have it fill the whole width of the page. So far, so simple, you would think. And, it is, in Firefox and IE.
Unfortunately in both major webkit browsers, despite having my footer (#footer) set for width:100%; max-width:none;, webkit won't make it fill the width of the browser window.
The page is here: page demonstrating problem
What's happening? Any solutions?
Edit: Apologies all - when I said it was working in Safari, that was a typo - I meant firefox.
Screenshots:
Here it is working in IE:
Here it is being broken in Chrome (same behaviour in Safari). The arrow is hand drawn, for emphasis.
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（6）
我运行 Chrome，它对我来说工作得很好。你能发个截图吗？
除此之外，您的内容有点偏离，所以这里有一个解决方案：
I run Chrome, and it works fine for me. Can you post a screenshot?
Besides that, your content is a bit off, so here's a fix for that:
您的问题可能是页脚有一些父元素
position:设置为任何内容。这将创建所谓的堆叠上下文。如果将页脚放在正文中或整个视口大小的元素内，则 100% 将真正是视口的 100%。编辑：显然这不是你的答案，而这通常是 99% 情况下的答案，所以我将其包含在内以供参考。
Your issue is probably that the footer has some parent element with
position:set to anything. This creates what is known as a stacking context. If you put your footer in the body or inside an element the size of the entire viewport, then 100% will truly be 100% of the viewport.edit: Apparently this is not your answer, just what is usually the answer in 99% of cases, so I include it for reference.
事实证明，没有注释的以下行导致了问题：
出于某种原因，WebKit 看到了
max-width: 11400px;最大宽度：无； width: 11400px;并将宽度设置为屏幕尺寸的一半。It turns out that the following line, without the comments, was causing problems:
For some reason WebKit saw the
max-width: 11400px; max-width: none; width: 11400px;and set the width to something like half the screen size.您有一个拼写错误：
width:100%;编辑：拼写错误现在似乎已修复
You have a typo:
width:100%;edit: typo now seems to be fixed
这
不是有效的减速，因为它无效，所以它被覆盖以
解决：
更改
完成！
in
this is not a valid deceleration, since it is not valid, it is being overwritten by
to solve:
change
done!
#footer上的position:fixed导致了这种情况。您在 Firefox 中使用 Firebug 吗？这将帮助您更快地进行调试。另外，请考虑使用像 960gs 这样的框架以及 Paul Irish 的 HTML5 Boilerplate 作为构建的良好基础。
The
position:fixedon#footeris causing that.Are you using Firebug in Firefox? That will help you to debug much more quickly. Also, consider using a framework like 960gs together with Paul Irish's HTML5 Boilerplate as a good base on which to build.