> 1200px

<768px

I use Bootstrap. One div on the whole screen and the second div (blue) block too. The first picture shows the behavior of blocks at high resolution (> 1200px), in the picture below - at small (<768px).

When reducing the window, the first div climbs onto the second, as seen in the picture. How to make the blocks really rubber and not climbs to others?

.blueblock { position: static; background-color: blue; min-height: 100%; height: 100%; padding-bottom: 100%; } .first-block { text-align: center; min-height: 100%; height: 100%; } .first-block img { padding: 20px; max-width: 60%; height: auto; text-align: center; } 
 <div class="container-fluid first-block col-md-12 col-lg-12 col-sm-12 col-xs-12" id="team"> <br> <br> <div class="row" style="text-align: center;"> <h2>Meet our team</h2> <h4>Lorem ipsum solo dis amet</h4> <br> </div> <div class="row"> <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12" style="text-align: center;"> <img src="http://placehold.it/200x200" alt="" class="img-circle"> <br> <br> <h3>AWESOME DESIGN</h3> <h4>Curabitur blandit tempus ptitor. Cum socielerisque nisl cons commodo cursus magna, vel scelerisque nisl onsec teet.</h4> </div> <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12" style="text-align: center;"> <img src="http://placehold.it/200x200" alt="" class="img-circle"> <br> <br> <h3>EXCELLENT SUPPORT</h3> <h4>Curabitur blandit tempus ptitor. Cum socielerisque nisl cons commodo cursus magna, vel scelerisque nisl onsec teet.</h4> </div> <div class="col-md-4 col-lg-4 col-sm-12 col-xs-12" style="text-align: center;"> <img src="http://placehold.it/200x200" alt="" class="img-circle"> <br> <br> <h3>FULLY RESPONSIVE</h3> <h4>Curabitur blandit tempus ptitor. Cum socielerisque nisl cons commodo cursus magna, vel scelerisque nisl onsec teet.</h4> </div> <br> <br> <br> <div class="container col-md-12 col-sm-12 col-xs-12" style="text-align: center; padding: 20px;"> <a href="#team" class="btnlink">Meet the team</a> </div> </div> </div> <!--BLUE BLOCK--> <div class="container-fluid blueblock col-md-12 col-sm-12 col-xs-12"> </div>

http://codepen.io/ksider/pen/GpoBGV

  • one
    Do you think html and css codes are not needed to answer your question? - Visman 4:16 pm
  • the code that you brought to the codepen is working fine, show your code that causes the overlay of divs - torokhkun

1 answer 1

It is necessary to delete the line in the styles .blueblock and .first-block

 height: 100%;

Since "height" indicates a specific height. And here the minimum height is enough.

 min-height: 100%;

It turns out:

 .blueblock { position: static; background-color: blue; min-height: 100%; padding-bottom: 100%; } .first-block { text-align: center; min-height: 100%; }
  • Try to write more detailed answers. Explain what is the basis of your statement? - Nicolas Chabanovsky ♦