Faça uma div preencher a altura do espaço na tela restante
https://stackoverflow.com/questions/90178
-
01-07-2019 - |
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianPergunta
Eu estou trabalhando em uma aplicação web onde eu quero o conteúdo para preencher a altura da tela inteira.
A página tem um cabeçalho, que contém um logotipo e informações de conta. Esta poderia ser uma altura arbitrária. Eu quero o div conteúdo para preencher o resto da página para o fundo.
Eu tenho um div cabeçalho e um div conteúdo. No momento eu estou usando uma tabela para o layout assim:
CSS e 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>
Toda a altura da página é preenchida, e não rolagem é necessária.
Para qualquer coisa dentro da div conteúdo, definindo top: 0; vai colocá-lo logo abaixo do cabeçalho. Às vezes, o conteúdo será uma tabela real, com sua altura ajustada para 100%. Colocando header dentro content não vai permitir que isso funcione.
Existe uma maneira de conseguir o mesmo efeito sem usar o table?
Update:
elementos dentro do div conteúdo terá alturas definido para percentagens bem. Então, alguma coisa em 100% dentro do div irá preenchê-lo para o fundo. Como vontade dois elementos em 50%.
Update 2:
Por exemplo, se o cabeçalho ocupa 20% da altura da tela, uma tabela especificada em 50% dentro #content ocuparia 40% do espaço da tela. Até agora, envolvendo a coisa toda em uma tabela é a única coisa que funciona.
Solução
2015 update: a abordagem flexbox
Existem duas outras respostas brevemente mencionar flexbox ; no entanto, que era mais do que dois anos atrás, e eles não fornecem qualquer exemplos. A especificação para flexbox tem definitivamente resolvido agora.
Nota: Embora a especificação CSS caixas flexíveis de layout está em fase Recomendação Candidato, nem todos os navegadores implementaram-lo. WebKit aplicação deve ser prefixado com -webkit-; implementos do Internet Explorer tem uma versão antiga da especificação, com o prefixo -ms-; Opera 12.10 implementa a versão mais recente do spec, unprefixed. Consulte a tabela de compatibilidade em cada propriedade para um status de compatibilidade up-to-date.
(retirado https://developer.mozilla.org/en-US/ docs / Guia / web / CSS / Flexible_boxes)
Todos os principais navegadores e IE11 + suporte Flexbox. Para o IE 10 anos ou mais, você pode usar os FlexieJS calço.
Para verificar o suporte atual, você também pode ver aqui: http://caniuse.com/#feat=flexbox
exemplo de Trabalho
Com flexbox você pode facilmente alternar entre qualquer um dos seus linhas ou colunas quer ter dimensões fixas, dimensões de conteúdo de tamanho ou dimensões de espaço restante. No meu exemplo eu definir o cabeçalho de encaixe ao seu conteúdo (como pela questão PO), eu adicionei um rodapé para mostrar como adicionar uma região de altura fixa e defina a área de conteúdo para preencher o espaço 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>
No CSS acima, os Flex shorthands propriedade do flex-grow , flex-encolher , propriedades e flex-base para estabelecer a flexibilidade dos itens flexíveis. Mozilla tem um introdução boa para a caixas modelo flexível .
Outras dicas
Não há realmente um som, como cross-browser para fazer isso em CSS. Assumindo o seu layout tem complexidades, você precisa usar JavaScript para definir a altura do elemento. A essência do que você precisa fazer é:
Element Height = Viewport height - element.offset.top - desired bottom margin
Uma vez que você pode obter este valor e definir a altura do elemento, você precisa anexar manipuladores de eventos tanto para o onload janela e onresize de modo que você pode disparar a sua função de redimensionamento.
Além disso, assumindo que o seu conteúdo pode ser maior do que o visor, você precisará definir overflow-y para rolagem.
O post original é mais de 3 anos atrás. Eu acho que muitas pessoas que vêm a este post como eu estão à procura de uma solução app-como layout, diz um cabeçalho, rodapé e conteúdo altura máxima de alguma forma fixada tendo a tela de descanso. Se assim for, este post pode ajudar, ele funciona no IE7 +, etc.
http://blog.stevensanderson.com/2011/10/05/full-height-app-layouts-a-css-trick-to-make-it-easier/
E aqui estão alguns trechos desse post:
@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>
Em vez de usar tabelas na marcação, você poderia usar tabelas CSS.
Markup
<body>
<div>hello </div>
<div>there</div>
</body>
(Relevante) CSS
body
{
display:table;
width:100%;
}
div
{
display:table-row;
}
div+ div
{
height:100%;
}
Algumas vantagens deste método são:
1) Menos de marcação
2) Markup é mais semântica do que as tabelas, porque isso não é de dados tabulares.
3) O suporte ao navegador é muito bom : IE8 +, todos os navegadores modernos e dispositivos móveis ( caniuse )
Apenas para completar, aqui estão os elementos HTML equivalentes a propriedades CSS para a A tabela modelo 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 }
CSS única abordagem (Se a altura é conhecida / fixo)
Quando você quer o elemento do meio de extensão em toda página na vertical, você pode usar calc() que é introduzida no CSS3.
Supondo que temos um altura fixa / header e footer elementos e queremos que o tag section para tirar toda a altura vertical disponível ...
Assumindo marcação
<header>100px</header>
<section>Expand me for remaining space</section>
<footer>150px</footer>
Portanto, o seu CSS deve 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;
}
Então, aqui, o que estou fazendo é, somando-se a altura de elementos e que deduzindo 100% usando a função calc().
Apenas certifique-se que você use height: 100%; para os elementos pai.
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>
E você simplesmente usar vh que significa view height em CSS ...
Olhe para o trecho de código eu criei para você abaixo e executá-lo:
body {
padding: 0;
margin: 0;
}
.full-height {
width: 100px;
height: 100vh;
background: red;
}<div class="full-height">
</div>
Além disso, olhada na imagem abaixo, que eu criei para você:
CSS3 simples Way
height: calc(100% - 10px); // 10px is height of your first div...
todos os principais navegadores nos dias de hoje suportam, então vá em frente, se você não tem a exigência para suportar navegadores antigos.
Pode ser feito 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;
}
eo HTML
<div id="page">
<div id="tdcontent">
</div>
<div id="content">
</div>
</div>
Eu verifiquei, Ele funciona em todos os principais navegadores: Chrome, IE e FireFox
Uma solução simples, 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>
Uma solução alternativa, com uma div centrado dentro do conteúdo div
Nenhuma das soluções postou trabalho quando você precisa do div baixo para rolagem quando o conteúdo é muito alto. Aqui está uma solução que funciona nesse 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;
}
fonte original: Enchendo o restante altura de um recipiente ao manusear Transbordo em CSS
Eu estive procurando uma resposta para isso também. Se você é o suficiente sorte de ser capaz de orientar IE8 e para cima, você pode usar display:table e valores relacionados para obter as regras de renderização de tabelas com elementos nível de bloco, incluindo div.
Se você é ainda mais sorte e seus usuários estão usando navegadores de nível superior (por exemplo, se este é um aplicativo intranet em computadores que você controla, como o meu projeto mais recente é), você pode usar o novo Box flexível layout em CSS3
!O que funcionou para mim (com um div dentro de outra div e eu assumo em todas as outras circunstâncias) é definir o preenchimento inferior a 100%. Ou seja, adicionar este à sua css / estilo:
padding-bottom: 100%;
Disclaimer: A resposta aceita dá a idéia da solução, mas eu estou achando um pouco inchado com um regras de mensagens publicitárias e CSS desnecessários. Abaixo está uma solução com muito poucas regras CSS.
HTML 5
<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 */
}
Solution acima usa viewport unidades e flexbox , e é, portanto, IE10 +, proporcionando-lhe usar a antiga sintaxe para IE10.
Codepen de jogar com: link para codepen
Ou este, para aqueles que necessitam do recipiente principal para ser scrollable em caso de transbordamento conteúdo: link para 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>
Em todos os navegadores são, você pode colocar o div "header" antes do conteúdo, como um irmão, e o mesmo CSS vai funcionar. No entanto, IE7- não interpreta a altura correcta, se a bóia é de 100%, nesse caso, de modo que as necessidades de cabeçalho para estar no conteúdo, como acima. O overflow: auto fará com que as barras de rolagem duplas no IE (que tem sempre a janela barra de rolagem visível, mas desativado), mas sem ele, o conteúdo será clipe se ele transborda
. Há uma tonelada de respostas agora, mas eu achei usando height: 100vh; ao trabalho no elemento div que as necessidades para encher todo o espaço vertical disponível.
Desta forma, eu não preciso de brincar com exibição ou posicionamento. Isso veio a calhar quando se utiliza Bootstrap para fazer um painel no qual eu tinha uma barra lateral e principal. Eu queria que o principal para alongar e preencher todo o espaço vertical para que eu pudesse aplicar uma cor de fundo.
div {
height: 100vh;
}
Suporta IE9 e up: clique para ver o link
Se você pode lidar com não suporte a navegadores antigos (ou seja, MSIE 9 ou mais), você pode fazer isso com Box flexível layout Módulo que já é W3C CR. Esse módulo permite que outros truques bom, também, como conteúdo re-ordenação.
Infelizmente, MSIE 9 ou menor não suportam isso e você tem que usar vendedor prefixo para a propriedade CSS para cada navegador diferente do Firefox. Esperemos que outros fornecedores soltar o prefixo em breve, também.
Uma outra opção seria CSS disposição da grade mas que tem ainda menos apoio de versões estáveis ??de navegadores . Na prática, apenas MSIE 10 suporta isso.
Eu wresteled com isso por um tempo e acabou com o seguinte:
Uma vez que é fácil de fazer o DIV conteúdo da mesma altura que o pai, mas aparentemente difícil para torná-lo a altura dos pais menos a altura de cabeçalho eu decidi fazer div conteúdo altura total mas a posição é absolutamente no canto superior esquerdo, e depois definir um preenchimento para a parte superior, que tem a altura do cabeçalho. Desta forma, o conteúdo é exibido perfeitamente sob o cabeçalho e preenche todo o espaço 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 que não apenas como este?
html, body {
height: 100%;
}
#containerInput {
background-image: url('../img/edit_bg.jpg');
height: 40%;
}
#containerControl {
background-image: url('../img/control_bg.jpg');
height: 60%;
}
Dar-lhe html e corpo (nessa ordem) uma altura e depois é só dar aos seus elementos uma altura?
Obras para me
style="height:100vh"
resolveu o problema para mim. No meu caso eu apliquei isso para o div necessário
Apenas definir o body com display:grid eo grid-template-rows usando auto ea propriedade valor fr.
* {
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>
pode, na verdade, utilizar display: table para dividir a área em dois elementos (cabeçalho e conteúdo), onde o cabeçalho pode variar em altura e o conteúdo enche o espaço restante. Isso funciona com toda a página, bem como quando a área é simplesmente o conteúdo de um outro elemento posicionado com conjunto position para relative, absolute ou fixed. Ele vai trabalhar, desde que o elemento pai tem um diferente de zero altura.
Veja este violino e também o código abaixo:
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, eu vou responder novamente usando seus novos requisitos. Desde que você não se preocupam com o conteúdo que está sendo escondido se for muito longo, você não precisa flutuar no cabeçalho. Basta colocar transbordamento escondido nas html e body tags e conjunto altura #content a 100%. O conteúdo será sempre maior do que a janela pela altura do cabeçalho, mas vai ser escondido e não fará com que as barras de rolagem.
<!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>
Tente este
var sizeFooter = function(){
$(".webfooter")
.css("padding-bottom", "0px")
.css("padding-bottom", $(window).height() - $("body").height())
}
$(window).resize(sizeFooter);
Eu encontrei uma solução bastante simples, porque para mim era apenas uma questão de design. Eu queria que o resto da página para não ser branco abaixo do rodapé vermelho. Então eu definir a cor páginas de fundo para vermelho. E os conteúdos backgroundcolor para branco. Com a altura conteúdo definido como por exemplo. 20em ou 50% de uma página quase vazia não vai deixar toda a página vermelho.
Por aplicativo móvel i use apenas VH e 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;
}
Eu tive o mesmo problema, mas eu não poderia fazer funcionar a solução com flexboxes acima. Então, eu criei meu próprio modelo, que inclui:
- um cabeçalho com um elemento de tamanho fixo
- um rodapé
- uma barra lateral com uma barra de rolagem que ocupa a altura restante
- conteúdo
Eu costumava flexboxes mas de uma forma mais simples, usando apenas as propriedades exibição: Flex e flex-direção: fileira | coluna :
Eu uso angular e eu quero que meus tamanhos de componentes para ser 100% do seu elemento pai.
A chave é definir o tamanho (em percentagem) para todos os pais para agradar a limitar seu tamanho. No seguinte exemplo novaaplicacao altura tem 100% da janela de visualização.
O componente principal tem 90% do visor, porque cabeçalho e rodapé têm 5%.
Eu postei meu modelo aqui: 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>
Spinning fora da idéia do Sr. Estrangeiro ...
Esta parece ser uma solução mais limpa do que a popular, uma caixa flexível para CSS3 habilitado navegadores.
Basta utilizar min-altura (em vez de altura) com calc () para o bloco de conteúdo.
O calc () inicia-se com 100% e subtrai alturas de cabeçalhos e rodapés (necessidade de incluir valores de preenchimento)
Usando o "min-height" em vez de "altura" é particularmente útil para que ele possa trabalhar com conteúdo javascript prestados e estruturas JS como Angular2. Caso contrário, o cálculo não vai empurrar o rodapé para a parte inferior da página uma vez que o conteúdo javascript prestados é visível.
Aqui está um exemplo simples de um cabeçalho e rodapé usando 50px altura e 20px preenchimento 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));
}
É claro que a matemática pode ser simplificado, mas você começa a idéia ...
É da dinâmica calc o espaço na tela remining, melhor usando Javascript.
Você pode usar CSS-IN-JS tecnologia, como abaixo lib:
https://github.com/cssobj/cssobj
Demonstração: https://cssobj.github.io/cssobj-demo/
que nunca trabalhou para mim de outra forma, em seguida, com o uso do JavaScript como NICCAI sugerido na primeira resposta. Eu estou usando essa abordagem para redimensionar o <div> com o Google Maps.
Aqui está o exemplo completo de como fazer isso (obras no Safari / Firefox / IE / iPhone / Andorid (obras com rotação)):
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>
