Haga que un div llene la altura del espacio restante de la pantalla
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPregunta
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 div y 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, configurando top: 0; Lo colocará justo debajo del encabezado.A veces el contenido será una tabla real, con su altura establecida al 100%.Poniendo header adentro content no permitirá que esto funcione.
¿Hay alguna manera de lograr el mismo efecto sin usar el table?
Actualizar:
Elementos dentro del contenido. div también tendrá alturas establecidas en porcentajes.Entonces algo al 100% dentro del div lo llenará 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% dentro #content Ocuparía el 40% del espacio de la pantalla.Hasta ahora, envolver todo en una mesa es lo único que funciona.
Solución
Actualización de 2015:el enfoque de caja flexible
Hay otras dos respuestas que mencionan brevemente caja flexible;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 comprobar el soporte actual también puede ver 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, el doblar propiedad abrevia la crecimiento flexible, flex-contraíble, y base flexible propiedades para establecer la flexibilidad de los elementos flexibles.Mozilla tiene un buena introducción al modelo de cajas flexibles.
Otros consejos
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>En lugar de usar tablas en el marcado, puedes usar tablas CSS.
Margen
<body>
<div>hello </div>
<div>there</div>
</body>
(Relevante) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
Algunas ventajas de este método son:
1) Menos margen de beneficio
2) El marcado es más semántico que las tablas, porque no son datos tabulares.
3) La compatibilidad con el navegador es muy bien:IE8+, todos los navegadores y dispositivos móviles modernos (Puedo usar)
Sólo para completar, aquí están los elementos HTML equivalentes a las propiedades CSS para el El modelo de tabla CSS
table { display: table }
tr { display: table-row }
thead { display: table-header-group }
tbody { display: table-row-group }
tfoot { display: table-footer-group }
col { display: table-column }
colgroup { display: table-column-group }
td, th { display: table-cell }
caption { display: table-caption }
Enfoque solo CSS (si la altura es conocida/fija)
Cuando desee que el elemento central abarque toda la página verticalmente, puede utilizar calc() que se introduce en CSS3.
Suponiendo que tenemos un altura fija header y footer elementos y queremos el section etiqueta para tomar toda la altura vertical disponible...
marcado asumido
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
Entonces tu CSS debería ser
html, body {
height: 100%;
}
header {
height: 100px;
background: grey;
}
section {
height: calc(100% - (100px + 150px));
/* Adding 100px of header and 150px of footer */
background: tomato;
}
footer {
height: 150px;
background-color: blue;
}
Así que aquí, lo que estoy haciendo es sumar la altura de los elementos y luego restarla de 100% usando calc() función.
Sólo asegúrate de usar height: 100%; para los elementos padres.
Usado:height: calc(100vh - 110px);
código:
.header { height: 60px; top: 0; background-color: green}
.body {
height: calc(100vh - 110px); /*50+60*/
background-color: gray;
}
.footer { height: 50px; bottom: 0; }
<div class="header">
<h2>My header</h2>
</div>
<div class="body">
<p>The body</p>
</div>
<div class="footer">
My footer
</div>¿Qué tal si simplemente usas vh Lo que significa view height en CSS...
Mira el fragmento de código Lo creé para ti a continuación y lo ejecuto:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>Además, mira la imagen a continuación que creé para ti:
CSS3 de forma sencilla
height: calc(100% - 10px); // 10px is height of your first div...
Todos los principales navegadores hoy en día lo admiten, así que continúe si no tiene el requisito de admitir navegadores antiguos.
Podría hacerse puramente por CSS usando vh:
#page
{
display:block; width:100%; height:95vh !important; overflow:hidden;
}
#tdcontent
{
float:left; width:100%; display:block;
}
#content
{
float:left; width:100%; height:100%; display:block; overflow:scroll;
}
y el HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
Lo comprobé. Funciona en todos los navegadores principales: Chrome, IE, y FireFox
Una solución simple, usando flexbox:
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex-grow: 1;
}<body>
<div>header</div>
<div class="content"></div>
</body>Una solución alternativa, con un div centrado dentro del div de contenido
Ninguna de las soluciones publicadas funciona cuando necesita que el div inferior se desplace cuando el contenido es demasiado alto.Aquí hay una solución que funciona en ese caso:
HTML:
<div class="table container">
<div class="table-row header">
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
<div>This is the header whose height is unknown</div>
</div>
<div class="table-row body">
<div class="table-cell body-content-outer-wrapper">
<div class="body-content-inner-wrapper">
<div class="body-content">
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
<div>This is the scrollable content whose height is unknown</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.table {
display: table;
}
.table-row {
display: table-row;
}
.table-cell {
display: table-cell;
}
.container {
width: 400px;
height: 300px;
}
.header {
background: cyan;
}
.body {
background: yellow;
height: 100%;
}
.body-content-outer-wrapper {
height: 100%;
}
.body-content-inner-wrapper {
height: 100%;
position: relative;
overflow: auto;
}
.body-content {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
También he estado buscando una respuesta para esto.Si tiene la suerte de poder apuntar a IE8 y versiones posteriores, puede usar display:table y valores relacionados para obtener las reglas de representación de tablas con elementos a nivel de bloque, incluido div.
Si tiene aún más suerte y sus usuarios utilizan navegadores de primer nivel (por ejemplo, si se trata de una aplicación de intranet en las computadoras que usted controla, como es mi último proyecto), puede usar el nuevo Diseño de caja flexible en CSS3!
Lo que funcionó para mí (con un div dentro de otro div y supongo que en todas las demás circunstancias) es establecer el relleno inferior al 100%.Es decir, agrega esto a tu css/hoja de estilo:
padding-bottom: 100%;
Descargo de responsabilidad:La respuesta aceptada da la idea de la solución, pero la encuentro un poco abultada con un contenedor innecesario y reglas CSS.A continuación se muestra una solución con muy pocas reglas CSS.
HTML5
<body>
<header>Header with an arbitrary height</header>
<main>
This container will grow so as to take the remaining height
</main>
</body>
CSS
body {
display: flex;
flex-direction: column;
min-height: 100vh; /* body takes whole viewport's height */
}
main {
flex: 1; /* this will make the container take the free space */
}
Usos de la solución anterior unidades de ventana gráfica y caja flexible, y, por lo tanto, es IE10+, siempre que utilice la sintaxis anterior para IE10.
Codepen para jugar con: enlace a codepen
O este, para aquellos que necesitan que el contenedor principal sea desplazable en caso de que el contenido se desborde: enlace a codepen
<!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 sensatos, puede colocar el div "encabezado" antes del contenido, como hermano, y el mismo CSS funcionará.Sin embargo, IE7- no interpreta la altura correctamente si el valor flotante es 100% en ese caso, por lo que el encabezado debe estar DENTRO del contenido, como se indicó anteriormente.El desbordamiento: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 ella, el contenido se recortará si se desborda.
Hay un montón de respuestas ahora, pero encontré usando height: 100vh; para trabajar en el elemento div que necesita llenar todo el espacio vertical disponible.
De esta manera, no necesito jugar con la visualización o el posicionamiento.Esto fue útil cuando usé Bootstrap para crear un panel en el que tenía una barra lateral y una principal.Quería que el principal se estirara y llenara todo el espacio vertical para poder aplicar un color de fondo.
div {
height: 100vh;
}
Soporta IE9 y superiores: haga clic para ver el enlace
Si puede lidiar con el hecho de no admitir navegadores antiguos (es decir, MSIE 9 o anteriores), puede hacerlo con Módulo de diseño de caja flexible que ya es W3C CR.Ese módulo también permite otros trucos interesantes, como reordenar el contenido.
Desafortunadamente, MSIE 9 o inferior no admite esto y debe usar el prefijo del proveedor para la propiedad CSS para todos los navegadores que no sean Firefox.Esperemos que otros proveedores también eliminen el prefijo pronto.
Otra opción sería Diseño de cuadrícula CSS pero eso tiene aún menos soporte de versiones estables de navegadores.En la práctica, sólo MSIE 10 lo admite.
Luché con esto por un tiempo y terminé con lo siguiente:
Dado que es fácil hacer que el contenido DIV tenga la misma altura que el padre, pero aparentemente es difícil hacer que sea la altura del padre menos la altura del encabezado, decidí hacer que el contenido div tenga la altura completa, pero colóquelo absolutamente en la esquina superior izquierda y luego defina un relleno. para la parte superior que tiene la altura del encabezado.De esta manera, el contenido se muestra claramente debajo del encabezado y llena todo el espacio restante:
body {
padding: 0;
margin: 0;
height: 100%;
overflow: hidden;
}
#header {
position: absolute;
top: 0;
left: 0;
height: 50px;
}
#content {
position: absolute;
top: 0;
left: 0;
padding-top: 50px;
height: 100%;
}
¿Por qué no así?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
¿Darle una altura a html y body (en ese orden) y luego simplemente darle una altura a sus elementos?
Funciona para mi
style="height:100vh"
resolvió el problema para mí.En mi caso apliqué esto al div requerido.
Simplemente definiendo el body con display:grid y el grid-template-rows usando auto y el fr valorar la propiedad.
* {
margin: 0;
padding: 0;
}
html {
height: 100%;
}
body {
min-height: 100%;
display: grid;
grid-template-rows: auto 1fr auto;
}
header {
padding: 1em;
background: pink;
}
main {
padding: 1em;
background: lightblue;
}
footer {
padding: 2em;
background: lightgreen;
}
main:hover {
height: 2000px;
/* demos expansion of center element */
}<header>HEADER</header>
<main>MAIN</main>
<footer>FOOTER</footer>En realidad puedes usar display: table para dividir el área en dos elementos (encabezado y contenido), donde el encabezado puede variar en altura y el contenido llena el espacio restante.Esto funciona con toda la página, así como cuando el área es simplemente el contenido de otro elemento colocado con position ajustado a relative, absolute o fixed.Funcionará siempre que el elemento principal tenga una altura distinta de cero.
Mira este violín y también el siguiente código:
CSS:
body, html {
height: 100%;
margin: 0;
padding: 0;
}
p {
margin: 0;
padding: 0;
}
.additional-padding {
height: 50px;
background-color: #DE9;
}
.as-table {
display: table;
height: 100%;
width: 100%;
}
.as-table-row {
display: table-row;
height: 100%;
}
#content {
width: 100%;
height: 100%;
background-color: #33DD44;
}
HTML:
<div class="as-table">
<div id="header">
<p>This header can vary in height, it also doesn't have to be displayed as table-row. It will simply take the necessary space and the rest below will be taken by the second div which is displayed as table-row. Now adding some copy to artificially expand the header.</p>
<div class="additional-padding"></div>
</div>
<div class="as-table-row">
<div id="content">
<p>This is the actual content that takes the rest of the available space.</p>
</div>
</div>
</div>
Vincent, responderé nuevamente usando tus nuevos requisitos.Como no le importa que el contenido quede oculto si es demasiado largo, no necesita hacer flotar el encabezado.Simplemente coloque el desbordamiento oculto en las etiquetas html y body, y configure #content altura al 100%.El contenido siempre será más largo que la ventana gráfica por la altura del encabezado, pero estará oculto y no generará barras de desplazamiento.
<!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;
overflow: hidden;
color: #FFF;
}
p {
margin: 0;
}
#header {
background: red;
}
#content {
position: relative;
height: 100%;
background: blue;
}
#content #positioned {
position: absolute;
top: 0;
right: 0;
}
</style>
</head>
<body>
<div id="header">
Header
<p>Header stuff</p>
</div>
<div id="content">
Content
<p>Content stuff</p>
<div id="positioned">Positioned Content</div>
</div>
</body>
</html>
Prueba esto
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Encontré una solución bastante sencilla, porque para mí era sólo una cuestión de diseño.Quería que el resto de la página no fuera blanco debajo del pie de página rojo.Entonces configuré el color de fondo de las páginas en rojo.Y el color de fondo del contenido es blanco.Con la altura del contenido establecida en, por ejemplo.20em o 50% una página casi vacía no dejará toda la página en rojo.
Para la aplicación móvil uso sólo VH y VW
<div class="container">
<div class="title">Title</div>
<div class="content">Content</div>
<div class="footer">Footer</div>
</div>
.container {
width: 100vw;
height: 100vh;
font-size: 5vh;
}
.title {
height: 20vh;
background-color: red;
}
.content {
height: 60vh;
background: blue;
}
.footer {
height: 20vh;
background: green;
}
Demostración - https://jsfiddle.net/u763ck92/
Tuve el mismo problema pero no pude hacer funcionar la solución con los flexboxes anteriores.Entonces creé mi propia plantilla, que incluye:
- un encabezado con un elemento de tamaño fijo
- un pie de página
- una barra lateral con una barra de desplazamiento que ocupa la altura restante
- contenido
Usé flexboxes pero de una manera más sencilla, usando solo propiedades mostrar:doblar y dirección flexible:fila|columna:
Utilizo angular y quiero que los tamaños de mis componentes sean el 100% de su elemento principal.
La clave es establecer el tamaño (en porcentajes) para todos los padres para limitar su tamaño.En el siguiente ejemplo, la altura de mi aplicación tiene el 100% de la ventana gráfica.
El componente principal tiene el 90% de la ventana gráfica, porque el encabezado y el pie de página tienen el 5%.
Publiqué mi plantilla aquí: https://jsfiddle.net/abreneliere/mrjh6y2e/3
body{
margin: 0;
color: white;
height: 100%;
}
div#myapp
{
display: flex;
flex-direction: column;
background-color: red; /* <-- painful color for your eyes ! */
height: 100%; /* <-- if you remove this line, myapp has no limited height */
}
div#main /* parent div for sidebar and content */
{
display: flex;
width: 100%;
height: 90%;
}
div#header {
background-color: #333;
height: 5%;
}
div#footer {
background-color: #222;
height: 5%;
}
div#sidebar {
background-color: #666;
width: 20%;
overflow-y: auto;
}
div#content {
background-color: #888;
width: 80%;
overflow-y: auto;
}
div.fized_size_element {
background-color: #AAA;
display: block;
width: 100px;
height: 50px;
margin: 5px;
}
HTML:
<body>
<div id="myapp">
<div id="header">
HEADER
<div class="fized_size_element"></div>
</div>
<div id="main">
<div id="sidebar">
SIDEBAR
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
<div class="fized_size_element"></div>
</div>
<div id="content">
CONTENT
</div>
</div>
<div id="footer">
FOOTER
</div>
</div>
</body>
Partiendo de la idea del Sr.Extraterrestre...
Esta parece una solución más limpia que la popular caja flexible para navegadores habilitados para CSS3.
Simplemente use min-height (en lugar de height) con calc() en el bloque de contenido.
calc() comienza con 100% y resta las alturas de los encabezados y pies de página (es necesario incluir valores de relleno)
Usar "altura mínima" en lugar de "altura" es particularmente útil, ya que puede funcionar con contenido renderizado de JavaScript y marcos JS como Angular2.De lo contrario, el cálculo no empujará el pie de página al final de la página una vez que el contenido renderizado de JavaScript sea visible.
A continuación se muestra un ejemplo sencillo de un encabezado y pie de página que utiliza una altura de 50 píxeles y un relleno de 20 píxeles para ambos.
HTML:
<body>
<header></header>
<div class="content"></div>
<footer></footer>
</body>
CSS:
.content {
min-height: calc(100% - (50px + 20px + 20px + 50px + 20px + 20px));
}
Por supuesto, las matemáticas se pueden simplificar, pero ya se entiende la idea...
Es un cálculo dinámico del espacio de pantalla restante, mejor usando Javascript.
Puede utilizar la tecnología CSS-IN-JS, como la siguiente lib:
https://github.com/cssobj/cssobj
MANIFESTACIÓN: https://cssobj.github.io/cssobj-demo/
él Nunca funcionó para mí de otra manera que no sea con el uso de JavaScript. como sugirió NICCAI en la primera respuesta.Estoy usando ese enfoque para reescalar el <div> con Google Maps.
Aquí está el ejemplo completo de cómo hacerlo (funciona en Safari/FireFox/IE/iPhone/Andorid (funciona con rotación)):
CSS
body {
height: 100%;
margin: 0;
padding: 0;
}
.header {
height: 100px;
background-color: red;
}
.content {
height: 100%;
background-color: green;
}
js
function resize() {
// Get elements and necessary element heights
var contentDiv = document.getElementById("contentId");
var headerDiv = document.getElementById("headerId");
var headerHeight = headerDiv.offsetHeight;
// Get view height
var viewportHeight = document.getElementsByTagName('body')[0].clientHeight;
// Compute the content height - we want to fill the whole remaining area
// in browser window
contentDiv.style.height = viewportHeight - headerHeight;
}
window.onload = resize;
window.onresize = resize;
HTML
<body>
<div class="header" id="headerId">Hello</div>
<div class="content" id="contentId"></div>
</body>
