Question

我试图将背景div与其他绝对定位的可移动/浮动div实际上100％。

宽度100％不计算.floater div远离屏幕。（浏览器使用滚动条显示）。

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

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;
}

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

我更新了示例来展示它。

Answer 1

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 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

Answer 3

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

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

Div元素宽度：当另一个div离开屏幕时，100％实际上不是100％（位置：绝对值）

3 个答案: