hijos - selector padre css
Cómo crear div para llenar todo el espacio entre el encabezado y el pie de página div (6)
Solución Flexbox
Usando el diseño flexible podemos lograrlo al mismo tiempo que permitimos un encabezado y pie de página de altura natural. Tanto el encabezado como el pie de página se pegarán a la parte superior e inferior de la ventana gráfica respectivamente (al igual que una aplicación móvil nativa) y el área de contenido principal rellenará el espacio restante, mientras que cualquier desbordamiento vertical se desplazará dentro de esa área.
HTML
<body>
<header>
...
</header>
<main>
...
</main>
<footer>
...
</footer>
</body>
CSS
html, body {
margin: 0;
height: 100%;
min-height: 100%;
}
body {
display: flex;
flex-direction: column;
}
header,
footer {
flex: none;
}
main {
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
flex: auto;
}
Estoy trabajando en pasar de usar tablas para propósitos de diseño a usar divs (sí, sí, el gran debate). Tengo 3 divs, un encabezado, contenido y pie de página. El encabezado y el pie de página son 50px cada uno. ¿Cómo consigo que el pie de página div permanezca en la parte inferior de la página y el contenido div para llenar el espacio intermedio? No quiero codificar el contenido de la altura de los divs porque la resolución de la pantalla puede cambiar.
Para ampliar la respuesta de Mitchel Sellers, ingrese su altura de div de contenido: 100% y asígnele un margen automático.
Para una explicación completa y un ejemplo, vea CSS Sticky Footer de Ryan Fait.
Como conoce el tamaño (altura) de su encabezado, colóquelo dentro del div de contenido (o use márgenes).
La posición absoluta le dará problemas si su contenido es más grande (más alto) que la ventana.
Para resumir (y esto vino del enlace CSS Sticky Footer proporcionado por Traingamer), esto es lo que utilicé:
html, body
{
height: 100%;
}
#divHeader
{
height: 100px;
}
#divContent
{
min-height: 100%;
height: auto !important; /*Cause footer to stick to bottom in IE 6*/
height: 100%;
margin: 0 auto -100px; /*Allow for footer height*/
vertical-align:bottom;
}
#divFooter, #divPush
{
height: 100px; /*Push must be same height as Footer */
}
<div id="divContent">
<div id="divHeader">
Header
</div>
Content Text
<div id="divPush"></div>
</div>
<div id="divFooter">
Footer
</div>
Una forma de hacer esto usando CSS Grid:
index.html
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="main.css" rel="stylesheet">
</head>
<body>
<main>
<header>Header</header>
<section>Content</section>
<footer>Footer</footer>
</main>
</body>
</html>
main.css
body {
margin: 0;
}
main {
height: 100%;
display: grid;
grid-template-rows: 100px auto 100px;
}
section {
height: 100%;
}
si intenta maximizar la altura de su div de contenido, en el complemento CSS
altura: 100%;
#footer {
clear: both;
}