Haga que un div llene la altura del espacio restante de la pantalla
Estoy trabajando en una aplicación web donde quiero que el contenido ocupe la altura de toda la pantalla.
La página tiene un encabezado que contiene un logotipo e información de la cuenta. Esta podría ser una altura arbitraria. Quiero que el div de contenido llene el resto de la página hasta el final.
Tengo un encabezado divy un contenido div. Por el momento estoy usando una tabla para el diseño como esta:
CSS y HTML
#page {
height: 100%;
width: 100%
}
#tdcontent {
height: 100%;
}
#content {
overflow: auto; /* or overflow: hidden; */
}<table id="page">
<tr>
<td id="tdheader">
<div id="header">...</div>
</td>
</tr>
<tr>
<td id="tdcontent">
<div id="content">...</div>
</td>
</tr>
</table>Se llena toda la altura de la página y no es necesario desplazarse.
Para cualquier cosa dentro del div de contenido, la configuración top: 0;lo colocará justo debajo del encabezado. A veces el contenido será una tabla real, con su altura establecida al 100%. Ponerlo headeradentro contentno permitirá que esto funcione.
¿Hay alguna manera de lograr el mismo efecto sin usar table?
Actualizar:
Los elementos dentro del contenido divtambién tendrán alturas establecidas en porcentajes. Entonces, algo al 100% dentro lo divllenará hasta el fondo. Al igual que dos elementos al 50%.
Actualización 2:
Por ejemplo, si el encabezado ocupa el 20% de la altura de la pantalla, una tabla especificada al 50% en el interior #contentocuparía el 40% del espacio de la pantalla. Hasta ahora, envolver todo en una mesa es lo único que funciona.
Actualización de 2015: el enfoque flexbox
Hay otras dos respuestas que mencionan brevemente flexbox ; sin embargo, eso fue hace más de dos años y no proporcionan ningún ejemplo. La especificación para flexbox definitivamente se ha resuelto ahora.
Nota: Aunque la especificación CSS Flexible Boxes Layout se encuentra en la etapa de recomendación candidata, no todos los navegadores la han implementado. La implementación de WebKit debe tener el prefijo -webkit-; Internet Explorer implementa una versión antigua de la especificación, con el prefijo -ms-; Opera 12.10 implementa la última versión de la especificación, sin prefijo. Consulte la tabla de compatibilidad de cada propiedad para conocer el estado de compatibilidad actualizado.
(tomado de https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Flexible_boxes )
Todos los principales navegadores e IE11+ son compatibles con Flexbox. Para IE 10 o anterior, puede utilizar la cuña FlexieJS.
Para consultar el soporte actual, también puede consultar aquí: http://caniuse.com/#feat=flexbox
Ejemplo de trabajo
Con flexbox puede cambiar fácilmente entre cualquiera de sus filas o columnas, ya sea que tengan dimensiones fijas, dimensiones del tamaño del contenido o dimensiones del espacio restante. En mi ejemplo, configuré el encabezado para que se ajuste a su contenido (según la pregunta de OP), agregué un pie de página para mostrar cómo agregar una región de altura fija y luego configuré el área de contenido para llenar el espacio restante.
html,
body {
height: 100%;
margin: 0;
}
.box {
display: flex;
flex-flow: column;
height: 100%;
}
.box .row {
border: 1px dotted grey;
}
.box .row.header {
flex: 0 1 auto;
/* The above is shorthand for:
flex-grow: 0,
flex-shrink: 1,
flex-basis: auto
*/
}
.box .row.content {
flex: 1 1 auto;
}
.box .row.footer {
flex: 0 1 40px;
}<!-- Obviously, you could use HTML5 tags like `header`, `footer` and `section` -->
<div class="box">
<div class="row header">
<p><b>header</b>
<br />
<br />(sized to content)</p>
</div>
<div class="row content">
<p>
<b>content</b>
(fills remaining space)
</p>
</div>
<div class="row footer">
<p><b>footer</b> (fixed height)</p>
</div>
</div>En el CSS anterior, la propiedad flex abrevia las propiedades flex-grow , flex-shrink y flex-basis para establecer la flexibilidad de los elementos flexibles. Mozilla tiene una buena introducción al modelo de cajas flexibles .
Realmente no existe una forma sólida en varios navegadores de hacer esto en CSS. Suponiendo que su diseño tiene complejidades, debe usar JavaScript para establecer la altura del elemento. La esencia de lo que debes hacer es:
Element Height = Viewport height - element.offset.top - desired bottom margin
Una vez que pueda obtener este valor y establecer la altura del elemento, deberá adjuntar controladores de eventos tanto a la carga de la ventana como al cambio de tamaño para poder activar la función de cambio de tamaño.
Además, suponiendo que su contenido pueda ser más grande que la ventana gráfica, deberá configurar overflow-y para desplazarse.
La publicación original es de hace más de 3 años. Supongo que muchas personas que, como yo, llegan a esta publicación están buscando una solución de diseño similar a una aplicación, por ejemplo, un encabezado, pie de página y contenido de altura completa fijos que ocupen el resto de la pantalla. Si es así, esta publicación puede ayudar, funciona en IE7+, etc.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
Y aquí hay algunos fragmentos de esa publicación:
@media screen {
/* start of screen rules. */
/* Generic pane rules */
body { margin: 0 }
.row, .col { overflow: hidden; position: absolute; }
.row { left: 0; right: 0; }
.col { top: 0; bottom: 0; }
.scroll-x { overflow-x: auto; }
.scroll-y { overflow-y: auto; }
.header.row { height: 75px; top: 0; }
.body.row { top: 75px; bottom: 50px; }
.footer.row { height: 50px; bottom: 0; }
/* end of screen rules. */
}<div class="header row" style="background:yellow;">
<h2>My header</h2>
</div>
<div class="body row scroll-y" style="background:lightblue;">
<p>The body</p>
</div>
<div class="footer row" style="background:#e9e9e9;">
My footer
</div>