divでの高さの問題

Question

私はそれに適用された背景イメージ（#wrapper）を持つdivを持ち、divの最初の子は絶対配置されたカラーオーバーレイdiv（.bg-overlay）です。この.bg-overlay divでは、他の要素が配置されていると、背景画像の高さが上がらないようです。

この#wrapper内のpタグにいくつかのボトムパッディングを適用しようとしていますが、inspectツールを見ているとオーバーフローしているようです。私は、なぜメイン#wrapper divが高さを増やしているのか理解できません。私はそれに200pxの分の高さを設定しました。私は何か非常にシンプルな私はここで行方不明と確信しています。助けてくれてありがとう、ここに私のマークアップです。

#wrapper { 
 
    background-image: url("http://placehold.it/350x150"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    position: relative; 
 
    min-height: 200px; 
 
} 
 

 
.bg-overlay { 
 
    background-color: rgba(75, 78, 83, 0.6); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#content-wrap p { 
 
    padding-bottom: 100px; 
 
}

<section id="wrapper"> 
 
    <div class="bg-overlay"> 
 
    <div id="content-wrap"> 
 
    <h1> 
 
    Heading Heading Heading 
 
    </h1> 
 
    <p> 
 
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
    </div> 
 
</section>

Answer 1

#wrapperそれは絶対的に位置しているので、あなたが.bg-overlayにコンテンツを追加として成長するつもりはありません。つまり、通常の文書フローから抜け出し、スペースを取らないということです。 #wrapperまでは空で、高さはありません。

.bg-overlayからコンテンツを移動するか、コンテンツを追加するときに#wrapperが調整されるように絶対配置を使用しないでください。擬似要素を使用してオーバーレイを作成することもできます。そうすれば、マークアップを単純化することができます。

position: relative;およびz-index: 5;オン#content-wrapは、擬似要素よりも高くなるのでオーバーレイの下にもありません。

#wrapper { 
 
    position: relative; 
 
    z-index: 0; 
 
    background-image: url("http://placehold.it/350x150"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
} 
 

 
#wrapper::before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    z-index: 5; 
 
    background-color: rgba(75, 78, 83, 0.6); 
 
} 
 

 
#content-wrap { 
 
    position: relative; 
 
    z-index: 5; 
 
} 
 

 
#content-wrap p { 
 
    color: white; 
 
    padding-bottom: 100px; 
 
}

<section id="wrapper"> 
 
    <div id="content-wrap"> 
 
    
 
    <h1> 
 
     Heading Heading Heading 
 
    </h1> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 

 
    </div> 
 
</section>

Answer 2

ここでの問題は、absoluteがdivを配置し、絶対的な要素はあなたのコンテナが成長しない理由です流れから外れている内すべてのあなたのコンテンツを持っています。

あなたオーバーレイのdivのタグを閉じて、あなたのpタグが（絶対配置されている）BG-オーバーレイのdiv内にある、あなたのcontent-wrap高いz-index

#wrapper { 
 
    background-image: url("http://placehold.it/350x150"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    position: relative; 
 
    min-height: 200px; 
 
} 
 

 
.bg-overlay { 
 
    background-color: rgba(75, 78, 83, 0.6); 
 
    width: 100%; 
 
    height: 100%; 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
} 
 

 
#content-wrap { 
 
    position: relative; 
 
    z-index: 10; 
 
} 
 

 
#content-wrap p { 
 
    padding-bottom: 100px; 
 
}

<section id="wrapper"> 
 
    <div class="bg-overlay"></div> 
 
    <div id="content-wrap"> 
 
    <h1> 
 
     Heading Heading Heading 
 
    </h1> 
 
    <p> 
 
     Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has 
 
     survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop 
 
     publishing software like Aldus PageMaker including versions of Lorem Ipsum. 
 
    </p> 
 
    </div> 
 
</section>

Answer 3

に設定#wrapperセクション内ではありません。

Answer 4

このCSSを試してみてください、それはあなたには、いくつかのテキストを書いた場合、ボックスが成長し、動作するはずですが;）

#wrapper { 
 
    background-image: url("http://placehold.it/350x150"); 
 
    background-repeat: no-repeat; 
 
    background-size: cover; 
 
    background-position: center center; 
 
    position: relative; 
 
} 
 

 
.bg-overlay { 
 
    background-color: rgba(75, 78, 83, 0.6); 
 
    width: 100%; 
 
    height: auto; 
 
    box-sizing: border-box; 
 
}