divが消えないようにするにはどうすればいいですか？

Question

私はブートストラップグリッドを使ってdiv構造を作っていますが、background-color：redのdivは、ウィンドウのサイズを変更してそれを小さくすると常に消えます。

なぜこれが起こっているのですか？それを防止する方法はありますか？

はそれを再生する：http://www.w3schools.com/code/tryit.asp?filename=F0JT60DW5CHG

.row-sm-3 { 
 
    height: 33.33%; 
 
} 
 

 
#wrap { 
 
    height: inherit; 
 
    background: red; 
 

 
}

<meta charset="utf-8"> 
 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 
<div class="container-fluid"> 
 

 
    <h1>Hello World!</h1> 
 
    <p>Resize the browser window to see the effect.</p> 
 

 
    
 
<div class="col-sm-8 col-sm-offset-2" style="height:300px"> 
 
    <div class="col-sm-6" style="color: white; background:black; height: inherit;"> 
 

 
     <div style="height: 25%;"><!-- space top --></div> 
 

 
     <div style="height: 50%;"> 
 
      <div style="background:red"> 
 
       <h2 id="sps_einleitung_h2">LOREM IPSUM</h2> 
 
      </div> 
 

 
      <div id="sps_einleitung_head_kasten_2"> 
 
       LOREM IPSUM 
 
       <br><br> 
 
       LOREM IPSUM 
 
      </div> 
 
     </div> 
 

 
     <div style="height: 25%;"><!-- space bottom --></div> 
 

 
    </div> 
 

 
    <div class="col-sm-6" id="wrap"> 
 

 
     <div style="height: 33.33%;position: relative;"> 
 
      <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;"> 
 
     </div> 
 
     <div style="height: 33.33%;position: relative;"> 
 
      <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;"> 
 
     </div> 
 
     <div style="height: 33.33%;position: relative;"> 
 
      <img src="https://php.quicoto.com/wp-content/uploads/2013/06/css3.jpg" style="width: 50px;position: absolute;"> 
 
     </div> 
 
    </div> 
 
</div> 
 

 

 

 
    <div class="col-sm-8 col-sm-offset-2" style="background-color:green; height:200px;"> 
 
     <div class="row" style="height:inherit;"> 
 
      <div class="col-sm-6" style="height:inherit; background-color:blue;"> 
 
       <div class="row-sm-3 row">A</div> 
 
       <div class="row-sm-3 row">B</div> 
 
       <div class="row-sm-3 row">C</div> 
 
      </div> 
 
      <div class="col-sm-6" style="height:inherit; background-color:yellow;"> 
 
       <div class="row-sm-3 row">D</div> 
 
       <div class="row-sm-3 row">E</div> 
 
       <div class="row-sm-3 row">F</div> 
 
      </div> 
 
     </div> 
 
    </div>

赤のdivは常に青のdivの下になっている、なぜそれが起こるんし、私はそれをどのように解決することができますか？

Answer 1

1リットルを持つことができる水のボトルがあるとしますが、2リットルで充填したいとします。

高さが300pxの親ディビジョンを持つことはできません。これには300pxの子も2つあります。両方の子の高さを減らすか、親要素の高さを増やします。

これがあなたを助けてくれることを願っています。

---

heightについてさらに読む。

Answer 2

Z-インデックスを変更しようとしましたか？ ex #wrap { 高さ：継承; 背景：赤; z-インデックス：10000; } '

Answer 3

最初の行のサイズを変更している間に、最初の行の2番目の列が2番目の行の下に隠れるように、最初の行に固定高さを追加しました。最初の行から別の2つの列に固定高さを追加します。

replace 
<div class="col-sm-8 col-sm-offset-2" style="height:300px"> 

with 
<div class="col-sm-8 col-sm-offset-2"> 

and 
<div class="col-sm-6" style="color: white; background:black; height: inherit;"> 

with 
<div class="col-sm-6" style="color: white; background:black; height: 300px;">