Bootstrap 3 colonnes pleine hauteur : une solution CSS personnalisée

Introduction :

Création les mises en page pleine hauteur avec Twitter Bootstrap 3 peuvent être difficiles. Bien que les classes natives de Bootstrap ne prennent pas en charge cette fonctionnalité, il est possible d'obtenir cet effet en utilisant du CSS personnalisé.

Approche CSS personnalisée :

1. Paramètre Hauteur à 100 % :
   Définissez la hauteur des éléments de corps, de conteneur et de ligne sur 100 % pour garantir qu'ils couvrent toute la hauteur du viewport.
2. Affichage sous forme de tableau :
   Convertissez l'élément conteneur en tableau à l'aide de display: table. Cela permet au contenu du conteneur d'être organisé dans une structure tabulaire.
3. Cellule flottante :
   Ajoutez une classe personnalisée, telle que no-float, à la colonne de navigation. Définissez cette classe pour qu'elle ait display: table-cell et float: none. Cela empêchera la colonne de navigation de flotter et lui permettra de s'aligner verticalement avec la colonne de contenu.

Marquage :

Header

    

        
Navigation
        
Content
    

CSS :

html, body, .container {
    height: 100%;
}
.container {
    display: table;
    width: 100%;
    margin-top: -50px;
    padding: 50px 0 0 0; 
}
.row {
    height: 100%;
    display: table-row;
}
.row .no-float {
    display: table-cell;
    float: none;
}

Avantages et considérations :

• Cette solution CSS personnalisée fournit une mise en page pleine hauteur compatible avec Bootstrap 3.
• Le Le rapport 1:3 entre la navigation et le contenu peut être ajusté en modifiant la largeur des colonnes dans le CSS.
• Cependant, il est important d'utiliser la classe personnalisée. (par exemple, no-float) au lieu de modifier les classes de colonnes natives de Bootstrap pour éviter les conflits.