html - ocupe - div que se ajuste a la pantalla bootstrap
¿Cómo hacer que el contenido tenga columnas de 100% de altura e igual altura en este diseño? (4)
Tengo este diseño donde el my_menu se fija en la parte superior, seguido por el encabezado, seguido por el contenido con 960px y centrado, en el que se han dejado 3 columnas a la izquierda y finalmente seguidas por un pie de página adhesivo.
El problema es ¿Cómo hacer que el contenido se extienda al 100% de altura incluso si no hay suficiente contenido en alguna de las columnas secundarias?
¿Cómo hacen que las 3 columnas tengan la misma altura independientemente del contenido de cualquier columna?
- ¡Mantén el pie de página adhesivo! ¡CSS puro, sin JavaScript, sin JQuery!
El marcado de HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Document Title</title>
<link rel="stylesheet" href="main.css" type="text/css" />
</head>
<body id="index">
<div id="wrapper">
<div id="my_menu">
FIXED MENU WIDTH 100%
</div>
<div id="my_header">
HEADER WIDTH 100%
</div>
<div id="content">
<p>CONTENT 960px</p>
<div id="col1" class="content_columns">
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
COLUMN 1 WIDTH 320px HEIGHT 100%
</div>
<div id="col2" class="content_columns">
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
COLUMN 2 WIDTH 320px HEIGHT 100%
</div>
<div id="col3" class="content_columns">
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
COLUMN 3 WIDTH 320px HEIGHT 100%
</div>
<div class="clear_floats"></div> <!-- For Clearing Floats -->
</div>
<div class="push"></div> <!-- For Sticky Footer -->
</div>
<div id="my_footer">
STICKY FOOTER WIDTH 100%
</div>
</body>
</html>
Los estilos CSS
* /* For CSS Reset */
{
padding: 0;
margin: 0;
}
html, body
{
width: 100%;
height: 100%;
}
div#wrapper
{
width: 100%;
height: 100%;
min-height: 100%; /* For Sticky Footer */
height: auto !important; /* For Sticky Footer */
margin: 0 auto -70px; /* For Sticky Footer */
}
div#my_menu
{
width: 100%;
height: 50px;
outline: 1px solid black;
background-color: grey;
text-align: center;
position: fixed;
}
div#my_header
{
width: 100%;
height: 100px;
outline: 1px solid black;
background-color: yellow;
text-align: center;
padding-top: 50px;
}
div#content
{
width: 960px;
margin: 0 auto;
outline: 1px solid black;
background-color: brown;
text-align: center;
}
div.content_columns
{
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
float: left;
}
div.clear_floats /* For Clearing Floats */
{
clear: both;
}
div#my_footer
{
width: 100%;
height: 70px;
outline: 1px solid black;
background-color: pink;
text-align: center;
}
div.push /* For Sticky Footer */
{
height: 70px;
}
AFAIK esto no es posible con CSS puro sin utilizar el diseño de cuadrícula o flexbox, que no son muy compatibles en los navegadores. (Flexbox es al menos un borrador de trabajo de w3c ...)
Puede solucionar esto aplicando min-height, que tiene varios inconvenientes, o establezca la altura mediante js. No conozco ninguna atmósfera de css cross-browser razonable.
Siempre puedes probar la vieja técnica de columna falsa . Es decir, el elemento que contiene tus tres divs tiene una imagen de fondo que se coloca verticalmente. esa imagen tendría líneas para las divisiones de tus columnas, y crearía la ilusión de alturas iguales.
Es torpe en términos de mantenibilidad, tienes que editar la imagen para hacer cambios en el diseño, pero es confiable.
Una solución con soporte completo IE6 + . Voy a sacar y explicar los bits relevantes de código.
Soporte moderno
div.content_columns {
width: 320px;
outline: 1px solid black;
background-color: gold;
text-align: center;
display: table-cell; /* No floats, this instead */
}
Entonces, como los navegadores modernos hacen que esta tarea sea fácil, todo lo que tenemos que hacer es utilizar display: table-cell para que esto funcione. Hace que las columnas tengan la misma altura y actúa como una celda de tabla. Easy peasy lemon squeezy.
Soporte IE 6 y 7
<!--[if lte IE 7]>
<style>
div#content {
overflow: hidden;
}
div.content_columns {
vertical-align: top;
display: inline;
zoom:1;
padding-bottom: 9999px;
margin-bottom: -9999px;
}
</style>
<![endif]-->
Ahora, para la compatibilidad con IE 6 y 7, vamos a utilizar algunos trucos. En primer lugar, debe tenerse en cuenta que esto no tiene que hacerse en un comentario condicional, pero me gusta más de esa manera. Más limpio para mí. Pero puedes usar hacks CSS para que estos valores solo funcionen en IE.
Lo que estamos haciendo es obtener IE 6 y 7 para tratar cada columna como un elemento de inline-block , pero como no son compatibles (al menos para los elementos de nivel de bloque) usamos visualización en inline , y un zoom: 1; corregir para desencadenar la propiedad hasLayout de IE . Esto lo tratará como si fuera un elmenent en inline-block línea. Luego, los configuramos todos para que estén alineados en la parte superior el uno con el otro, y usamos otro pequeño truco. Usamos el padding: 9999px para extender la parte inferior del elemento hasta el momento en que los otros elementos probablemente no sean más largos, y usamos el margin: -9999px; para no cambiar la representación de la página cuando lo hacemos. No queremos extender la página, solo el fondo. 9999px es arbitrario y puede tener cualquier valor siempre que sea lo suficientemente alto como para ser mayor que la diferencia entre las columnas más largas y las más cortas. Y para los toques finales, establecemos el overflow: hidden en el elemento contenedor para que los fondos no extiendan la página sangrando por la parte inferior.
Y ahí lo tienes, compatibilidad total con IE 6+ para el diseño de ancho fijo de múltiples columnas usando pure CSS 2 (más zoom MS).
bfrohs ideó una solución que funciona en navegadores IE: columnas de altura completa sin desplazamiento
@Jawad - ¡Gracias de nuevo por su tiempo y su ayuda! :)