如何防止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">
      <!-- Black Container -->
      <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>

      <!-- Black Container -->
      <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 总是低于蓝色 div，为什么会发生这种情况，我该如何解决？

Answer 1

假设你有一瓶水，可以装 1 升，但你想用 2 升装满它。

您不能有一个高度为 300 像素的父 div，并且其中有 2 个也有 300 像素的孩子。降低两个子元素的高度或增加父元素的高度。

希望对你有所帮助。

.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">
      <!-- Black Container -->
      <div class="col-sm-6" style="color: white; background:black; height: 300px;">

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

      <!-- Black Container -->
      <div class="col-sm-6" id="wrap" style="height: 300px">

          <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;">
      <div class="row" style="height:inherit;">
         <div class="col-sm-6" style="height:300px; 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:300px; 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>

---

阅读更多关于height的信息。

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

Answer 3

您是否尝试过更改 z-index？ 前任 ＃裹 { 身高：继承； 背景：红色； z指数：10000； }'

Answer 4

使用 css "clear:both" 属性