Estoy trabajando en una aplicación web donde quiero que el contenido llene la altura de toda la pantalla.
La página tiene una cabecera, que contiene un logotipo, y la información de la cuenta. Esto podría ser una altura arbitraria. Quiero que el contenido div para llenar el resto de la página a la parte inferior.
Tengo un div
de cabecera y un div
de contenido. Por el momento estoy usando una tabla para el diseño así:
CSS y HTML
Comienza el snippet: js hide: false -->
#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>
...fin del fragmento..;
Se llena toda la altura de la página y no es necesario el desplazamiento.
Para cualquier cosa dentro del div de contenido, establecer top: 0;
lo pondrá justo debajo de la cabecera. A veces el contenido será una tabla real, con su altura establecida al 100%. Poner cabecera
dentro de contenido
no permitirá que esto funcione.
¿Hay alguna manera de conseguir el mismo efecto sin usar la "tabla"?
Actualización:
Los elementos dentro del contenido div
tendrán alturas establecidas en porcentajes también. Así que algo al 100% dentro del div
lo llenará hasta el fondo. Al igual que dos elementos al 50%.
Actualización 2:
Por ejemplo, si la cabecera ocupa el 20% de la altura de la pantalla, una tabla especificada al 50% dentro de #content
ocuparía el 40% del espacio de la pantalla. Hasta ahora, envolver todo en una tabla es lo único que funciona.
Realmente no hay una forma sólida y multi navegador de hacer esto en CSS. Asumiendo que tu diseño tiene complejidades, necesitas usar JavaScript para establecer la altura del elemento. La esencia de lo que necesitas hacer es:
Element Height = Viewport height - element.offset.top - desired bottom margin
Una vez que usted puede obtener este valor y establecer la altura del elemento, es necesario adjuntar los controladores de eventos a la ventana onload y onresize para que pueda disparar su función de cambio de tamaño.
También, asumiendo que su contenido podría ser más grande que la ventana gráfica, necesitará establecer overflow-y para desplazarse.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Test</title>
<style type="text/css">
body
,html
{
height: 100%;
margin: 0;
padding: 0;
color: #FFF;
}
#header
{
float: left;
width: 100%;
background: red;
}
#content
{
height: 100%;
overflow: auto;
background: blue;
}
</style>
</head>
<body>
<div id="content">
<div id="header">
Header
<p>Header stuff</p>
</div>
Content
<p>Content stuff</p>
</div>
</body>
</html>
En todos los navegadores sanos, puedes poner el div "cabecera" antes del contenido, como un hermano, y el mismo CSS funcionará. Sin embargo, IE7- no interpreta correctamente la altura si el float es del 100% en ese caso, por lo que la cabecera tiene que estar DENTRO del contenido, como arriba. El overflow: auto provocará barras de desplazamiento dobles en IE (que siempre tiene la barra de desplazamiento de la ventana gráfica visible, pero deshabilitada), pero sin él, el contenido se recortará si se desborda.
Si el único problema es la altura, el uso de divs parece funcionar:
<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>
En una simple prueba, el ancho de la cabecera/contenido es diferente en tu ejemplo y en el mío, pero no estoy seguro por tu post si te preocupa el ancho?