Bootstrap 3 deux colonnes pleine hauteur

Question

J'essaie de faire une page à deux colonnes. pleine hauteur avec Twitter Bootstrap 3. Il semble que Twitter Bootstrap 3 ne prend pas en charge les mises en page pleine hauteur. Ce que je veux faire :

  +-------------------------------------------------+
  |                     Header                      |
  +------------+------------------------------------+
  |            |                                    |
  |            |                                    |
  |Navigation  |         Content                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  |            |                                    |
  +------------+------------------------------------+

Si le contenu se développe, le nav devrait également croître.

• La hauteur de 100% pour chaque parent ne fonctionne pas car il y a le cas où le contenu est d'une seule ligne.
• position: absolute semble être le mauvais chemin.
• display: table et display: table-cell résout le problème, mais pas de manière élégante.

HTML :

    <div class="container">
      <div class="row">
        <div class="col-md-3"></div>
        <div class="col-md-9"></div>
      </div>
    </div>

Y a-t-il un moyen de le faire avec les valeurs par défaut Twitter Bootstrap 3 classes ?

Answer 1

Edit : Sur Bootstrap 4 classes natives peut produisent des colonnes pleine hauteur ( DEMO ) parce qu'ils ont changé leur système de grille à flexbox. (Lire la suite pour Bootstrap 3)

---

Les classes natives de Bootstrap 3.0 ne prennent pas en charge la mise en page que vous décrivez, mais nous pouvons intégrer des feuilles de style CSS personnalisées qui utilisent les éléments suivants Tableaux css pour y parvenir.

Démonstration de Bootply / Codepen

Markup :

<header>Header</header>
<div class="container">
    <div class="row">
        <div class="col-md-3 no-float">Navigation</div>
        <div class="col-md-9 no-float">Content</div>
    </div>
</div>

(Pertinent) CSS

html,body,.container {
    height:100%;
}
.container {
    display:table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; /*set left/right padding according to needs*/
    box-sizing: border-box;
}

.row {
    height: 100%;
    display: table-row;
}

.row .no-float {
  display: table-cell;
  float: none;
}

Le code ci-dessus permettra d'obtenir colonnes pleine hauteur (en raison des propriétés css-table personnalisées que nous avons ajoutées) et avec rapport 1:3 (Navigation:Content) pour largeurs d'écran moyennes et plus - (en raison des classes par défaut de bootstrap : col-md-3 et col-md-9)

NB :

1) Afin de ne pas perturber les classes de colonnes natives de bootstrap, nous ajoutons une autre classe telle que no-float dans le balisage et ne mettre que display:table-cell et float:none sur cette classe (plutôt que sur les classes de colonnes elles-mêmes).

2) Si nous ne voulons utiliser le code css-table que pour un point de rupture spécifique (disons les largeurs d'écran moyennes et supérieures) mais que pour les écrans mobiles nous voulons revenir au comportement habituel de bootstrap, nous pouvons envelopper notre CSS personnalisé dans une requête média, par exemple :

@media (min-width: 992px) {
  .row .no-float {
      display: table-cell;
      float: none;
  }
}

Démonstration du Codepen

Désormais, pour les écrans plus petits, les colonnes se comporteront comme les colonnes bootstrap par défaut (chacune obtenant une largeur complète).

3) Si le rapport 1:3 est nécessaire pour toutes les largeurs d'écran, il est probablement préférable de supprimer les classes col-md-* de bootstrap du balisage, car elles ne sont pas destinées à être utilisées de cette manière.

Démonstration du Codepen

Answer 2

Vous pouvez réaliser ce que vous voulez avec le padding-bottom: 100%; margin-bottom: -100%; astuce, a vous pouvez voir dans ce violon.

Je change un peu votre HTML, mais vous pouvez obtenir le même résultat avec votre propre HTML avec le code suivant

.col-md-9 {
    overflow: hidden;
}

.col-md-3 {
    padding-bottom: 100%;
    margin-bottom: -100%;
}

Answer 3

Solution purement CSS

Violon de travail

Utilisation de CSS2.1 uniquement, fonctionne avec tous les navigateurs (IE8+), sans spécifier de hauteur ou de largeur.

Cela signifie que si votre en-tête s'allonge soudainement, ou si votre navigation de gauche doit être élargie, vous n'avez pas besoin d'y remédier. tout ce qui est dans votre CSS.

Totalement réactif, simple et clair et très facile à gérer.

<div class="Container">
    <div class="Header">
    </div>
    <div class="HeightTaker">
        <div class="Wrapper">
            <div class="LeftNavigation">
            </div>
            <div class="Content">
            </div>
        </div>
    </div>
</div>

Explication : Le conteneur div prend 100% de la hauteur du corps, et il est divisé en 2 sections. La section de l'en-tête s'étendra à la hauteur nécessaire, et la section de la HeightTaker se chargera du reste. Comment cela est-il possible ? En faisant flotter un élément vide à côté du conteneur avec une hauteur de 100% (en utilisant :before ), et en donnant le HeightTaker un élément vide à la fin avec la règle claire (en utilisant :after ). cet élément ne peut pas être dans la même ligne que l'élément flottant, donc il est poussé jusqu'à la fin. qui est exactement le 100% du document.

Avec cela, nous faisons le HeightTaker s'étendent sur le reste de la hauteur du conteneur, sans indiquer de hauteur/ marge spécifique.

à l'intérieur de ce HeightTaker nous construisons une mise en page flottante normale (pour obtenir un affichage de type colonne) avec une modification mineure. nous avons une Wrapper qui est nécessaire pour l'élément 100% hauteur pour travailler.

Mise à jour

Voici la Démo avec les classes Bootstrap. (J'ai juste ajouté un div à votre mise en page)

Answer 4

J'ai pensé à un changement subtil, qui ne change pas le comportement par défaut du bootstrap. Et je peux l'utiliser uniquement lorsque j'en ai besoin :

.table-container {
  display: table;
}

.table-container .table-row {
  height: 100%;
  display: table-row;
}

.table-container .table-row .table-col {
  display: table-cell;
  float: none;
  vertical-align: top;
}

pour que je puisse l'utiliser comme ça :

<div class="container table-container">
  <div class="row table-row">
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
    <div class="col-lg-4 table-col"> ... </div>
  </div>
</div>

Answer 5

À ma connaissance, vous pouvez utiliser jusqu'à 5 méthodes pour y parvenir :

1. Utiliser les propriétés CSS display table/table-cell ou utiliser des tableaux réels.
2. Utilisation d'un élément à positionnement absolu à l'intérieur du wrapper.
3. en utilisant la propriété d'affichage Flexbox, mais, à ce jour, il a encore soutien partiel
4. Simulez la hauteur totale des colonnes en utilisant la fonction technique de la fausse colonne .
5. En utilisant la technique du padding/margin. Voir exemple .

Bootstrap : Je n'ai pas beaucoup d'expérience avec lui mais je ne pense pas qu'il fournisse des styles pour cela.

.row
{
    overflow: hidden;
    height: 100%;
}
.row .col-md-3,
.row .col-md-9 
{
    padding: 30px 3.15% 99999px; 
    float: left;
    margin-bottom: -99999px;
}
.row .col-md-3 p,
.row .col-md-9 p 
{
    margin-bottom: 30px;
}
.col-md-3
{
    background: pink;
    left:0;
    width:25%
}
.col-md-9
{
    width: 75%;
    background: yellow;
}