divの背景をウィンドウの幅の100％にする

Question

コンテナの中にdiv-3というコンテンツがあります。私は彼の身長の100％を増やすかもしれないこの背景色にしたい。私はこれをCSSを使って可能と考えています。ここに私の必要条件のイメージがあります。視覚的なトリックとして

*{padding:0; margin:0; box-sizzing:border-box;} 
 
.container{margin: 0px auto; width: 80%; border: 1px solid #333;} 
 
.content{min-height:50px} 
 
.content-3{background:green}

<div class="container"> 
 
<div class="content content-1">content 1</div> 
 
<div class="content content-2">content 2</div> 
 
<div class="content content-3">content 3</div> 
 
<div class="content content-4">content 4</div> 
 
</div>

Answer 1

代替の回答として、同じ効果を達成するために擬似要素:beforeと:afterを使用することもできます。

HTMLに変更はありません。

あなたのCSSにこれを追加します。

.content.content-3 { 
    position: relative; 
} 
.content.content-3:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: -10vw; 
    right: 100%; 
    background: green; 
} 
.content.content-3:after { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 100%; 
    right: -10vw; 
    background: green; 
} 

編集を：右/左の位置について-10vwに-100%を変更しました。 vwはビューポート幅を意味するので、コンテナが80%幅の場合、水平方向のスクロールなしでそれぞれの側を10vwにして100％にします。

Answer 2

、あなたはdiv要素にパディングを追加し、負のマージンを使用して対抗することができます。しかし、あなたは、オーバーフロー-Xを追加する必要があります。水平スクロールを防ぐために、身体に隠さ：

*{padding:0; margin:0; box-sizzing:border-box;} 
 
.container{margin: 0px auto; width: 80%; border: 1px solid #333;} 
 
.content{min-height:50px} 
 
.content-3{ 
 
    background:green; 
 
    padding-left:100%; 
 
    padding-right:100%; 
 
    margin-left:-100%; 
 
    margin-right:-100%; 
 
} 
 

 
body{overflow-x:hidden}

<div class="container"> 
 
<div class="content content-1">content 1</div> 
 
<div class="content content-2">content 2</div> 
 
<div class="content content-3">content 3</div> 
 
<div class="content content-4">content 4</div> 
 
</div>

Answer 3

あなたが複数のコンテナ要素を作成することができるしている場合は、のような何かができる：

<div class="container"> 
    <div class="content content-1">content 1</div> 
    <div class="content content-2">content 2</div> 
</div> 
<div class="container-wrapper"> 
    <div class="container"> 
     <div class="content content-3">content 3</div> 
    </div> 
</div> 
<div class="container"> 
    <div class="content content-4">content 4</div> 
</div> 

次に、コンテナラッパーの全幅を緑色の背景にします。