如何防止div消失?

时间:2016-11-07 12:28:32

标签: html css twitter-bootstrap grid

我使用bootstrap网格创建了一个div结构,但是在调整窗口大小并使其非常小之后,背景颜色为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>

红色div总是处于蓝色div之下,为什么会发生这种情况,我该如何解决呢?

4 个答案:

答案 0 :(得分:2)

想象一下,你有一瓶水,可以有1升,但你想用2升装满它。

你不能拥有一个高度为300px的父div,并且有2个孩子,其中也有300px。降低两个孩子的身高或增加父元素的高度。

我希望这对你有所帮助。

详细了解height

答案 1 :(得分:1)

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

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

答案 2 :(得分:0)

您是否尝试过更改z-index? 前     #wrap {     身高:继承;     背景:红色;     的z-index:10000;     }“

答案 3 :(得分:0)

使用CSS的“ clear:both”属性