div要素の幅：100％実際には他のdivが画面外にあるときは100％ではありません（位置：絶対）

Question

絶対配置されている他の可動/浮動小数点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; 
} 

編集：明確にするため、私はページ全体渡って 'ストレッチ' に背景をしたいと思います、例えば、それはイメージであった場合、この例でスクロールすると、画像も同様にスクロールします。

私は、この例を示してそれを表示しました。あなたは、CSSを正規化するように選択することができますjsfiddleのCSSの一部の右上にある歯車のアイコンをクリックするとhttp://meyerweb.com/eric/tools/css/reset/

：

Answer 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>

あなたは、CSSのリセットを使用する必要があります。ここに私がやったフォークjsfiddleだこと： https://jsfiddle.net/ckkoq3pn/

_ 

Answer 2

Answer 3

.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