Та же высота колонки с содержанием внутри

Question

Сегодня я столкнулся с проблемой CSS. У меня была проблема, когда у моих двух столбцов нет одинаковой высоты из-за их содержимого и в зависимости от разрешения экрана. Поэтому я устанавливаю высоту своих столбцов на 650 пикселей.

За исключением теперь, согласно разрешению, кнопка или содержимое выходят из колонки (по мере того, как высота последней фиксирована).

See here the picture

Идеи решить мою проблему?

PS: Я использую Bootstrap.

<article class="section-wrapper clearfix" id="rejoindre"> 
 
     <div class="content-wrapper clearfix"> 
 
      <div class="col-sm-12 col-md-12"> 
 
       <!-- Titre --> 
 
       <h1 class="text-center">Vous aussi rejoignez l'aventure !</h1> 
 
       <div class="col-sm-6 col-md-6"> 
 
        <div class="thumbnail" style="height : 650px;"> 
 
         <img alt="..." src= 
 
         "assets/images/other_images/section_rejoindre/btn_decouverte.png"> 
 
         <div class="caption"> 
 
          <h3 class="text-center">NIMERIA Demo</h3> 
 
          <p class="text-center">Le Mode Découverte est un 
 
          module qui vous permet d'essayer sans candidature 
 
          une partie des ajouts exclusifs de Niméria.</p> 
 
          <ul class="pull-left"> 
 
           <li>Sans candidature(sauf bêta)</li> 
 
           <li>Inscription rapide</li> 
 
           <li>Reset de la map</li> 
 
           <li>Accès au système de quête</li> 
 
          </ul> 
 
          <div class="clearfix"></div> 
 
          <p class="text-center"><a class= 
 
          "btn btn-primary btn-lg" href= 
 
          "http://91.121.160.218/oldforum/forums/candidatures-postulez-pour-la-beta.193/" 
 
          style= 
 
          "border-radius: 5px; background:#597A78;">S'inscrire 
 
          et jouer !</a></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div class="col-sm-6 col-md-6"> 
 
        <div class="thumbnail" style="height : 650px;"> 
 
         <img alt="..." src= 
 
         "assets/images/other_images/section_rejoindre/btn_world.png"> 
 
         <div class="caption"> 
 
          <h3 class="text-center">NIMERIA World</h3> 
 
          <p class="text-center">Niméria World est le serveur 
 
          original qui vous propose toutes les 
 
          fonctionnalités et ajouts inédits qui font le 
 
          succès du projet.</p> 
 
          <div class="pull-left"> 
 
           <ul> 
 
            <li>Sous candidature</li> 
 
            <li>Création du personnage</li> 
 
            <li>Choix d'une nation</li> 
 
            <li>Présence des saisons</li> 
 
           </ul> 
 
          </div> 
 
          <div class="clearfix"></div> 
 
          <p class="text-center"><a class= 
 
          "btn btn-primary btn-lg" href= 
 
          "http://91.121.160.218/oldforum/" style= 
 
          "border-radius: 5px; background:#597A78;">Bientôt 
 
          disponible</a></p> 
 
         </div> 
 
        </div> 
 
       </div> 
 
       <div></div><!-- .content-wrapper --> 
 
      </div> 
 
     </div> 
 
    </article><!-- .section-wrapper -->

Answer 1

Вы можете использовать display: flex, чтобы заставить всех братьев и сестер контейнера имеют одинаковую высоту.

See this jsfiddle

HTML:

<div id="container"> 
    <div class="box">Lorem ipsum...</div> 
    <div class="box">Lorem ipsum</div> 
    <div class="box">Lorem ipsum</div> 
    <div class="box">Lorem ipsum</div> 
</div> 

CSS:

#container { 
    display: flex; 
    flex-direction: row; 
} 
.box { 
    padding: 20px; 
    background-color: red; 
    margin-right: 20px; 
    width: 200px; 
} 

В вашем случае display:flex следует использовать на родительском контейнере для ваших коробок, которые должны иметь одинаковую высоту.

Flexbox - only partially supported in IE 10 и не поддерживается в IE 9 и ниже. Пожалуйста, подумайте об этом, если вы ожидаете, что у вас будет большая часть пользователей IE.

Answer 2

вы можете попробовать это:

body { 
    background-color: #444; 
    margin: 0; 
} 

#wrapper { 
    width: 1005px; 
    margin: 0 auto; 
} 
#leftcolumn, #rightcolumn { 
    border: 1px solid white; 
    float: left; 
    min-height: 450px; 
    color: white; 
} 
#leftcolumn { 
    width: 250px; 
    background-color: #111; 
} 

#rightcolumn { 
    width: 750px; 
    background-color: #777; 
} 

DEMO