Bootstrap 3 columnas de altura completa: una solución CSS personalizada

Introducción:

Creación Los diseños de altura completa con Twitter Bootstrap 3 pueden ser un desafío. Si bien las clases nativas de Bootstrap no admiten esta característica, es posible lograr este efecto usando CSS personalizado.

Enfoque de CSS personalizado:

1. Configuración 100% de altura:
   Establezca la altura del cuerpo, el contenedor y los elementos de fila en 100% para garantizar que abarquen toda la altura del ventana gráfica.
2. Mostrar como una tabla:
   Convierta el elemento contenedor en una tabla usando display: table. Esto permite organizar el contenido del contenedor en una estructura tabular.
3. Celda flotante:
   Agregue una clase personalizada, como no flotante, a la columna de navegación. Configure esta clase para que tenga display: table-cell y float: none. Esto evitará que la columna de navegación flote y permitirá que se alinee verticalmente con la columna de contenido.

Marcado:

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;
}

Ventajas y consideraciones:

• Esta solución CSS personalizada proporciona un diseño de altura completa que es compatible con Bootstrap 3.
• El La relación 1:3 entre navegación y contenido se puede ajustar modificando el ancho de las columnas en el CSS.
• Sin embargo, es importante utilizar la clase personalizada (por ejemplo, no flotante) en lugar de modificar las clases de columnas nativas de Bootstrap para evitar conflictos.