div 元素宽度：当另一个 div 不在屏幕上时，100% 实际上不是 100%（位置：绝对）答案

【问题标题】：Div element width: 100% not actually 100% when another div is off the screen (position: absolute)div 元素宽度：当另一个 div 不在屏幕上时，100% 实际上不是 100%（位置：绝对）
【发布时间】：2017-01-03 09:39:56
【问题描述】：

我正在尝试使用其他绝对定位的可移动/浮动 div 使背景 div 实际上 100%。

宽度 100% 不考虑 .floater div 远离屏幕。（浏览器显示滚动条）。

问题实例：https://jsfiddle.net/h0arax9o/2/

滚动到预览的右侧。我希望紫色背景覆盖整个文档。

html:

<div class="background"></div>
<div class="floater"></div>

css:

.background {
   background: purple;
   width: 100%;
   height: 100%;
   position: absolute;
}

.floater {
    background: red;
    width: 200px;
    height: 200px;
    left: 1400px;
    position: absolute;
}

编辑：为清楚起见，我希望背景在整个页面上“拉伸”，例如，如果它是图像，当您在示例中滚动时，图像也会滚动。

我更新了示例以展示这一点。

【问题讨论】：

标签： html css

【解决方案1】：

.background {
   background: purple;
   width: 100%;
   height: 100%;
   position: fixed;
}

.floater {
    background: red;
    width: 200px;
    height: 200px;
    left: 1400px;
    position: absolute;
}

<div class="background"></div>
<div class="floater"></div>

【讨论】：

这通过将背景设置为固定来工作，这是有道理的，但我不希望背景被“固定”。我希望它是 100%，例如，在 jsfiddle 中，背景不是 ~1500px，它是可见的 100%（~400px），当你将它设置为固定时，它仍然是 ~400px 但不是移动。希望这是有道理的
@naradlov - 请更清楚地说明您的问题，也许可以举个例子。

【解决方案2】：

.background {
    background: purple;
    top: 0; right: 0; bottom: 0; left: 0;
    position: fixed;
}

.floater {
    background: red;
    width: 200px;
    height: 200px;
    left: 1400px;
    position: absolute;
}

enter link description here

【讨论】：

感谢您的回答。请通过添加一些关于您更改的内容以及您的代码回答问题的原因来改进它。不鼓励仅使用代码回答。

【解决方案3】：

您需要使用 css 重置：http://meyerweb.com/eric/tools/css/reset/

如果你点击 jsfiddle 的 css 部分右上角的齿轮图标，你可以选择规范化 css。这是我做的一个分叉的jsfiddle：https://jsfiddle.net/ckkoq3pn/

【讨论】：