位置：固定导致元素比浏览器更宽答案

【问题标题】：position: fixed caused element to be wider than browser位置：固定导致元素比浏览器更宽
【发布时间】：2013-12-12 22:59:24
【问题描述】：

谁能告诉我为什么 position:fixed 会导致元素比浏览器或页面上的其他内容更宽并导致水平滚动？

这里是代码 HTML

<header>
     this is a header
</header>

<div class="container">
     this is a container
</div>

CSS

 header {
      width: 90%;
      height: 100px;
      background: blue;
      position: fixed;
      z-index: 100;
 }

.container {
     width: 90%;
     height: 500px;
     background: red;
     position: relative;
     z-index: -2;
}

这里是codepen的链接http://codepen.io/colbydodson/pen/wcgua

【问题讨论】：

这篇博文 (bradfrost.com/blog/mobile/fixed-position) 虽然陈旧且没有直接解决您的问题，但对于其他在移动设备上存在固定定位问题的人来说可能值得一看。

标签： html css

【解决方案1】：

Width 以不同的方式应用于 relative 和 fixed 元素、祖先 margin 以及相对于其 position 属性是父级可继承的样式属性。

body 标签将具有默认的用户代理样式表 8px 边距 (http://www.w3.org/TR/CSS2/sample.html)，

header 90% 宽度，固定、没有任何top、left、right 或bottom 值将定位到最近的可用位置，但将继承原始文档/视口大小，使其实际上是 90% 宽，但定位在 10px 'body' 边距偏移处。要测试添加top:0; left:0; 为固定 header http://jsbin.com/ETAqADu/1/edit

.container 是一个设置为relative 位置的块级DIV 元素，将是可用父级可用宽度的90%，即body innerWidth（不包括10 + 10 px X 轴上的边距）

不需要的结果：
从逻辑上讲，header 将比 .container 宽 20px，因为固定位置会将您的元素移出body 流。

修复：
通过设置为 0 来控制您的父 (body) 元素默认边距

body { margin: 0; }

或者一个小而重的CSS重置，比如：

/* QuickReset */
*, *::before, *::after { margin: 0; box-sizing: border-box; }

另请阅读CSS Box Model - Margin collapsing

【讨论】：

很好的解释。
谢谢先生。很好的答案和解释！

【解决方案2】：

我只在移动设备上遇到过类似的问题。尽管在任何父项上没有边距、边框、填充，但我的固定元素仍然比视口宽，而且我没有使用width: auto 的选项。

如果你愿意不支持IE8及以下，可以使用

width: 100vw

Can I use Viewport units: vw, vh, vmin, vmax

【讨论】：

请注意，此解决方案不适用于移动设备和桌面设备，因为 vw 包含任何滚动条的大小。因此，如果桌面上有滚动条，那么这仍然会导致页眉比页面上的正文元素宽。但是，它确实适用于移动设备。
我找到的解决方案是使用：width: 100%;最大宽度：100vw；

【解决方案3】：

接受的答案很好，但在我的情况下，我看到了一个比页面其余部分宽的固定标题仅在移动设备上。它恰好是由页脚中的某些元素引起的，该元素的像素比浏览器的视口宽（在我的情况下为 width: 750px）像素宽。

如果您想知道您页面上的某些元素是否会导致您遇到此问题？只需打开浏览器控制台并进一步删除一些元素。在某些时候，您可能会注意到标题再次变为正确的宽度。您刚刚删除的元素或其中的某些元素有可能具有比浏览器视口宽的width（以像素为单位）。

在这种情况下，解决方案是将该元素设置为较小的宽度或将其设为flexible。

【讨论】：

【解决方案4】：

默认情况下，body 标签有边距。
在你的样式表中试试这个：

body{
  margin: 0;
}

【讨论】：

【解决方案5】：

正如 Salaw 提到的，使用 body { margin: 0; } 将解决问题，因为 <body> 具有默认边距/填充（取决于浏览器）。 position: fixed; 完全从文档流中移除一个元素，使其仅与视口相关，而position: relative; 则不然。

鉴于这一事实，并鉴于 width: 90% 的意思是“使该元素占用父元素的 90% 的可用空间”，并且鉴于 fixed 元素的父元素是视口，而该 @987654328 的父元素是视口@ 元素是带有边距的主体，您的大小存在差异。

见http://codepen.io/anon/pen/exzpC

【讨论】：

【解决方案6】：

因为position:fixed 表现为元素与文档分离，并放置在文档的最近的上/左角，添加了默认正文的边距。这就是为什么如果您重置 body 边距，它将占用与您的第二个 div 相同的空间。

【讨论】：

在这种情况下，您的意思是 position: fixed; 不是 static。