Bootstrap css - div hauteur et débordement

Question

J'ai un problème avec le site Web de mon ami que je ne peux pas résoudre. Si vous pouviez aider je serais très heureux .. Et le problème est:

Mon div bootstrap ne tient pas une hauteur et passe sous la div suivante, en particulier dans la version responsive de tablette/téléphone. Peut-être qu'il sera plus facile si je vous donne l'adresse:

http://trido.io/index3.html

et le code dont je parle est:

<section id="download" class="download bg-primary text-center"> 
    <div class="container"> 


      <div class='col-md-1'> 
       <!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> --> 
      </div> 


     <div class='col-md-4'> 

      <div class="row"> 

       <div class='col-md-1'> 
       </div> 


       <div class='col-md-9'> 

        <p align="center">TriDo - Do a chain of three!</p><br> 
        <p>Arrange your balls in order from 1 to 3: 
        horizontally, vertically or diagonally. Prevent opponent's arrangement of balls.</p><br><br> 
       </div> 
      </div> 


      <div class="row"> 

       <ul> 
        <li>Multiplayer<li> 
        <li>Endless single-player mode<li> 
        <li>Game Center leaderboards<li> 
        <li>Game Center Achievements<li> 
       </ul> 



      </div> 


     </div> 

     <div class='col-md-1'> 

     </div> 

      <div class="col-md-5"> 

       <div class="device-container"> 
        <div class="device-mockup iphone6 portrait black"> 
         <div class="device"> 
          <div class="screen"> 

             <!-- <video width="300" height="534" controls> --> 
              <video width="270" height="480" controls> 

              <source src="TrailerDoTel.mp4" type="video/mp4"> 
              <source src="TrailerDoTel.ogg" type="video/ogg"> 

              </video> 

           <div class="button"> 
           </div> 
         </div> 
        </div> 
       </div> 

      </div> 
      </div> 

      <div class='col-md-0.5'> 
       <!-- <img src="img/gify/pionNew.gif" alt="" align="center" /> --> 
      </div> 

     </div> 

</section> 

Answer 1

Ceci est parce que votre <div class="device-mockup iphone6 portrait black"> est en position absolute qui prend l'élément hors du flux du document, de sorte que son contenu n'affecte pas les autres éléments dans le DOM.

Si vous le réglez sur position: relative;, il ne chevauchera plus le div en dessous.

Ou vous pouvez donner à votre .device-container une hauteur statique, comme height: 676px;