La question originale concerne Bootstrap 3 et prend en charge IE8 et 9, donc Flexbox serait la meilleure option, mais cela ne fait pas partie de ma réponse en raison du manque de support, voir http://caniuse.com/#feat=flexbox et basculer l’Internet Explorer boîte. Assez mauvais, hein?

2 façons:

1. Table d’affichage: Vous pouvez vous contenter de transformer la ligne en affichage: tableau et affichage de la colonne: tableau-cellule. Cela fonctionne, mais les limites des tables sont là, parmi lesquelles les pressions et les tirages et les décalages ne fonctionneront pas. De plus, je ne sais pas où vous utilisez ceci – à quel point d’arrêt. Vous devez rendre l’image pleine largeur et l’envelopper dans un autre conteneur pour y insérer le remplissage. En outre, vous devez déterminer la conception sur mobile, c’est pour 768px et plus. Quand je l’utilise, je redéclare les tailles et je les colle parfois parce que les tables prennent la largeur du contenu à l’intérieur de celles-ci. Vous aurez besoin de jouer. J’utilise aussi un script mais vous devez changer le moins de fichiers pour l’utiliser ou cela ne fonctionnera pas de manière réactive.

DEMO: http://jsbin.com/EtUBujI/2

  .row.table-row > [class*="col-"].custom { background-color: lightgrey; text-align: center; } @media (min-width: 768px) { img.img-fluid {width:100%;} .row.table-row {display:table;width:100%;margin:0 auto;} .row.table-row > [class*="col-"] { float:none; float:none; display:table-cell; vertical-align:top; } .row.table-row > .col-sm-11 { width: 91.66666666666666%; } .row.table-row > .col-sm-10 { width: 83.33333333333334%; } .row.table-row > .col-sm-9 { width: 75%; } .row.table-row > .col-sm-8 { width: 66.66666666666666%; } .row.table-row > .col-sm-7 { width: 58.333333333333336%; } .row.table-row > .col-sm-6 { width: 50%; } .col-sm-5 { width: 41.66666666666667%; } .col-sm-4 { width: 33.33333333333333%; } .row.table-row > .col-sm-3 { width: 25%; } .row.table-row > .col-sm-2 { width: 16.666666666666664%; } .row.table-row > .col-sm-1 { width: 8.333333333333332%; } } 

HTML

 
 
 
 100% height to make equal to -> 
 
  
 
  

2. bg div absolu

DEMO: http://jsbin.com/aVEsUmig/2/edit

DEMO avec le contenu ci-dessus et ci-dessous: http://jsbin.com/aVEsUmig/3

 .content { text-align: center; padding: 10px; background: #ccc; } @media (min-width:768px) { .my-row { position: relative; height: 100%; border: 1px solid red; overflow: hidden; } .img-fluid { width: 100% } .row.my-row > [class*="col-"] { position: relative } .background { position: absolute; padding-top: 200%; left: 0; top: 0; width: 100%; background: #ccc; } .content { position: relative; z-index: 1; width: 100%; text-align: center; padding: 10px; } } 

HTML

 
 
 
 
 This is inside a relative positioned z-index: 1 div 
 
 
 
  
 
  

Je cherchais juste un petit problème et j’ai trouvé ceci:

 .div{ height : 100vh; } 

Plus d’informations

 vw: 1/100th viewport width vh: 1/100th viewport height vmin: 1/100th of the smallest side vmax: 1/100th of the largest side 

Vous devez définir la hauteur de chaque élément parent de la hauteur que vous souhaitez définir.

   
 
 Make this division 100% height. 
 
   

Article.

JsFiddle exemple

Ma solution était de rendre tous les parents à 100% et de définir un pourcentage spécifique pour chaque ligne:

 html, body,div[class^="container"] ,.column { height: 100%; } .row0 {height: 10%;} .row1 {height: 40%;} .row2 {height: 50%;}