Solución:
Editar:
En Bootstrap 4, clases nativas pueden producen columnas de altura completa (DEMO) porque cambiaron su sistema de cuadrícula a flexbox. (Siga leyendo para Bootstrap 3)
Las clases nativas de Bootstrap 3.0 no admiten el diseño que describe, sin embargo, podemos integrar algunos CSS personalizados que hacen uso de tablas css para lograr esto.
Demostración de Bootply / Codepen
Margen:
<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>
(Relevante) 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;
}
El código anterior logrará columnas de altura completa (debido a las propiedades personalizadas de la tabla css que agregamos) y con relación 1: 3 (Navegación: Contenido) para anchos de pantalla medios y superior – (debido a las clases predeterminadas de bootstrap: col-md-3 y col-md-9)
NÓTESE BIEN:
1) Para no estropear las clases de columnas nativas de bootstrap, agregamos otra clase como no-float en el marcado y solo establecido display:table-cell y float:none en esta clase (en oposición a las propias clases de columna).
2) Si solo queremos usar el código css-table para un punto de interrupción específico (digamos anchos de pantalla medios y superiores) pero para pantallas móviles queremos volver por defecto al comportamiento habitual de arranque, entonces podemos envolver nuestro CSS personalizado dentro de una consulta de medios , decir:
@media (min-width: 992px) {
.row .no-float {
display: table-cell;
float: none;
}
}
Demostración de Codepen
Ahora, para pantallas más pequeñas, las columnas se comportarán como columnas de arranque predeterminadas (cada una con ancho completo).
3) Si la relación 1: 3 es necesaria para todos los anchos de pantalla, entonces probablemente sea mejor eliminar las clases col-md- * de bootstrap del marcado porque no es así como deben usarse.
Demostración de Codepen
Puedes lograr lo que quieras con el padding-bottom: 100%; margin-bottom: -100%; truco, tiene se puede ver en este violín.
Cambio un poco tu HTML, pero puedes lograr el mismo resultado con tu propio HTML con el siguiente código
.col-md-9 {
overflow: hidden;
}
.col-md-3 {
padding-bottom: 100%;
margin-bottom: -100%;
}
Solución CSS pura
Violín de trabajo
Solo con CSS2.1, funciona con todos los navegadores (IE8 +), sin especificar altura ni ancho.
Eso significa que si su encabezado crece repentinamente más, o su navegación izquierda necesita agrandarse, no tiene que arreglar cualquier cosa en tu CSS.
Totalmente receptivo, simple y claro y muy fácil de administrar.
<div class="Container">
<div class="Header">
</div>
<div class="HeightTaker">
<div class="Wrapper">
<div class="LeftNavigation">
</div>
<div class="Content">
</div>
</div>
</div>
</div>
Explicación:
El contenedor div toma el 100% de la altura del cuerpo y está dividido en 2 secciones. La sección del encabezado se extenderá hasta su altura necesaria, y la HeightTaker tomará el resto. ¿Cómo se logra? flotando un elemento vacío junto al contenedor con una altura del 100% (usando :before), y dando el HeightTaker un elemento vacío al final con la regla clara (usando :after). ese elemento no puede estar en la misma línea con el elemento flotante, por lo que se empuja hasta el final. que es exactamente el 100% del documento.
Con eso hacemos el HeightTaker abarcan el resto de la altura del contenedor, sin indicar ninguna altura / margen específico.
dentro de eso HeightTaker construimos un diseño flotante normal (para lograr la visualización en forma de columna) con un cambio menor … tenemos un Wrapper elemento, que es necesario para el 100% altura para trabajar.
Actualizar
Aquí está la demostración con las clases de Bootstrap. (Acabo de agregar un div a su diseño)