Как предотвратить исчезновение 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>

Красный ДИВ всегда получает под голубым DIV, почему это происходит и как я могу решить эту проблему?

Answer 1

Представьте, что у вас есть бутылка воды, которая может иметь 1 литр, но вы хотите заполнить ее 2 литрами.

Вы не можете иметь родительский div с высотой 300 пикселей и иметь 2 детей, у которых также есть 300 пикселей. Уменьшите высоту обоих детей или увеличьте высоту родительского элемента.

Надеюсь, это вам помогло.

---

Узнайте больше о 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;">