Faça um mergulho preencher a altura do espaço restante da tela

Estou trabalhando em uma aplicação web onde eu quero que o conteúdo preencha a altura de toda a tela.

A página tem um cabeçalho, que contém um logotipo, e informações sobre a conta. Isto pode ser uma altura arbitrária. Eu quero que o conteúdo div preencha o resto da página até o fundo.

Eu tenho um cabeçalho div e um conteúdo div. No momento eu estou utilizando 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 é necessário rolar a página.

Para qualquer coisa dentro do conteúdo div, definir top: 0; vai colocá-lo mesmo por baixo do cabeçalho. Às vezes o conteúdo será uma tabela real, com sua altura ajustada para 100%. Colocar header dentro do content não permitirá que isto funcione.

Existe uma maneira de conseguir o mesmo efeito sem utilizar a "mesa"?

Actualização:

Os elementos dentro do conteúdo div terão alturas definidas em percentagens também. Assim, algo a 100% dentro do div irá preenchê-lo até ao fundo. Assim como dois elementos a 50%.

Actualização 2:

Por exemplo, se o cabeçalho ocupar 20% da altura da tela's, uma tabela especificada a 50% dentro do `#contente' ocuparia 40% do espaço da tela. Até agora, embrulhar tudo em uma tabela é a única coisa que funciona.

danronmoon
Pergunta editada :em
Programação
html css html-table
18º setembro 2008 в 5:06
12 vistas

Não há realmente uma maneira de fazer isto no CSS. Assumindo que 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ê possa obter este valor e definir a altura do elemento, você precisa anexar os manipuladores de eventos tanto na janela onload quanto onresize para que você possa acionar sua função de redimensionamento.

Além disso, assumindo que seu conteúdo pode ser maior do que o viewport, você precisará definir overflow-y para rolar.

Igor
Resposta editada :em
Comentários (13)
 



Test

body
,html
{
    height: 100%;
    margin: 0;
    padding: 0;
    color: #FFF;
}

#header
{
    float: left;
    width: 100%;
    background: red;
}

#content
{
    height: 100%;
    overflow: auto;
    background: blue;
}





    <div id="content">
        <div id="header">
                Header
                <p>Header stuff</p>
        </div>
            Content
            <p>Content stuff</p>
    </div>

Em todos os navegadores sãos, você pode colocar o "header div" antes do conteúdo, como um irmão, e o mesmo CSS vai funcionar. Entretanto, o IE7- não interpreta corretamente a altura se o "float" estiver 100% nesse caso, então o "header" precisa estar IN no conteúdo, como acima. O overflow: auto irá causar barras de rolagem duplas no IE (que sempre tem a barra de rolagem da viewport visível, mas desabilitada), mas sem ela, o conteúdo será cortado se transbordar.

Comentários (2)

Se o único problema é a altura, apenas o uso de mergulhos parece funcionar:

<div id="header">header content</div>
<div id="content" style="height:100%">content content</div>

Em um teste simples, a largura do cabeçalho/conteúdo é diferente no seu exemplo e no meu, mas não tenho certeza do seu posto se você está preocupado com a largura?

Comentários (4)