内部divは、親の幅の設定と寸法に関係なく常にブラウザウィンドウ全体の幅にすることはできますか？

Question

内側のdivは、親の幅の設定と寸法に関係なく、常にフルブラウザウィンドウの幅にすることはできますか？私はまた、divのページの左側に、すなわち、left: 0をゼロにしてbody要素（親divではない）との相対的な位置にしたいと思っています。遊ん

私は正しい幅のdivの内側を作ることができますが、それは上に移動（下に座っていません）、私はまだのdivを移動する方法を考え出したていない以下の内容は0

に委ねそして物事をより困難にする。 CSS2（CSS3を使用しない）で行うことは可能ですか？

.full-page-width { 
    position: absolute; 
    left: 0; 
    right: 0; 
    width: 100%; 
} 

<div class="container"> 
    <div class="row"> 
     <div class="col-md-8"> 
      <p>I should sit above Foo</p> 

      <div class="full-page-width"> 
       <p>Foo</p> 
      </div> 

      <p>I should always sit below Foo</p> 
     </div> 
    </div> 
</div> 

Answer 1

は、単にビュー幅ユニットを使用します位置決めのための

div{ 
    width: 100 vw; 
} 

https://www.w3schools.com/cssref/css_units.asp

を、あなたは、コンテナの外に置くか、負のマージンを使用する必要があります。

Answer 2

はい、あなたがしたい場合は、私が知っている2つの方法に設定することができます。

まずVWとVH

div{ 
width:100vw;//for width 
height:100vh;//for height 
} 

その他を使用しています溶液を使用していますポジション

div{ 
position fixed; 
left:0;//for width 
right:0;//for width 
top:0;//for height 
bottom:0;//for height 
} 

Answer 3

あなたはposition:fixedでそれを行うことができます。

html, body { 
 
    margin:0; 
 
} 
 
.container { 
 
    background: linear-gradient(to bottom, lightgreen, green); 
 
    height: 1000px; 
 
    width:200px; 
 
} 
 

 
.inner { 
 
    position:fixed; 
 
    width: 100%; 
 
    bottom: 0; 
 
    height: 50px; 
 
    background-color: lightblue; 
 
}

<div class="container"> 
 
    <div class="inner"></div> 
 
</div>