如何防止div消失？

Question

我已经通过使用引导程序网格来制作div结构，但是在调整窗口大小并使其非常小的情况下，背景颜色：红色的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>

红格总是蓝格下得到，为什么这种情况发生，我怎么能解决呢？

Answer 1

假设你有一瓶能有1升水，但你想用2升 - 填充它。

你不能拥有一个高度为300px的父级div，并且在这个父级div中也有300px的子级。减小两个孩子的高度或增加父元素的高度。

我希望这对你有所帮助。

---

了解更多关于height。

Answer 2

您是否尝试过更改z-index？ ex #wrap { height：inherit; 背景：红色; z-index：10000; }'

Answer 3

您已将固定高度添加到第一行，以便在调整窗口第一列的第二列时将其隐藏在第二行的下方。将固定高度添加到第一行的两个单独列中。

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;">