Hola,
Tengo una web, con el siguiente grid:
<div class="row"> <div class="col-sm-3 col-md-2"> Menú </div> <div class="col-sm-9 col-md-10"> Tabla </div> </div>
Quiero meter un color de fondo al <div> de la clase "col-sm-3 col-md-2" y que el height de forma automática se ajuste al pie de la página, para que el color de fondo se extienda, ¿Cómo podría hacerlo?
Con auto ni con 100% lo estoy consiguiendo.
Saludos y gracias,
Respuestas
Aunque parece difícil de creer, hacer que dos columnas tengan la misma altura sigue siendo una de las cosas más difíciles de conseguir. Existen varias formas de conseguirlo, aunque la mayoría no son compatibles con navegadores un poco antiguos:
- Flexbox, esta es la única forma correcta de hacerlo. Funciona genial y es muy sencilla. El problema es que sólo está disponible en los navegadores más modernos, por lo que requiere del uso de JavaScript para los navegadores antiguos. En este tutorial explican muy bien cómo hacerlo.
- Display: table, este método te va a funcionar casi en cualquier navegador, pero no deja de ser un "hack", que puede dificultarte el diseño del resto del sitio. En este tutorial lo explican muy bien para Bootstrap.
- One True Layout, es una de las técnicas más viejas que existen y parece un hack bastante "sucio", pero funciona bien en todos los navegadores del mundo. En la sección One True Layout Method de este artículo lo explican bien. En este sitio web que estás viendo, utilizamos esta técnica. Fíjate por ejemplo en la portada del foro y verás que la columna lateral tiene un fondo gris y es de la misma altura que la parte central de la página. Si echas un vistazo al CSS, verás cómo aplicamos este truco.
@javiereguiluz
29 julio 2015, 9:10