Tornar o conteúdo HTML expandir para preencher a janela

Question

Eu tenho uma página HTML dividida verticalmente em

• Header
• Corpo
• rodapé

O corpo, por sua vez é dividida horizontalmente em

• Um grande DIV na esquerda rodeada por rolagem, mostrando uma parte de um diagrama
• Um formulário à direita

O cabeçalho e rodapé são de altura fixa. O corpo deve expandir verticalmente para preencher a parte da janela não ocupado pelo cabeçalho e rodapé.

de largura fixa Da mesma forma que o formulário é eo painel de rolagem deve expandir horizontalmente para preencher a largura da janela.

O diagrama é muito grande (até 10x10 screenfuls), então não posso mostrar tudo isso. Em vez disso eu quero mostrar o máximo possível (usando a janela inteira) para que as necessidades do usuário para percorrer o mínimo possível.

Eu também não pode usar javascript, porque alguns usuários são necessariamente paranóico e deve desativá-lo.

Algumas opções que tenho considerado:

• Uma tabela com largura e altura da célula painel de rolagem definido para 100% e todos os outros para 1%
  não funciona. A tabela (e, portanto, da página) se expande para conter o diagrama inteiro, mesmo com o posicionamento absoluto no DIV painel de rolagem.
• Absolute posicionando para compensar o painel da parte inferior da página pela altura do rodapé
  Funciona, mas imprecisa: a altura do rodapé depende do tamanho da fonte atual e se o texto é enrolado. Isso significa que eu preciso deixar uma margem grande para garantir que eles não se sobreponham.
• Coloque o diagrama em um IFRAME
  A melhor solução que eu encontrei com scripts deficientes, mas limita o que eu posso fazer em scripts quando eles são habilitado.

Eu noto que o Google Maps utiliza uma área de tamanho fixo para o mapa quando os scripts são desativados. Se o Google desistiu de este problema que isso significa que não é viável?

Answer 1

Usando a altura:. 100% atributo CSS deve torná-lo trabalho

Dave Woods 100% Altura Disposição Usando CSS funciona para você .

Answer 2

É um aspecto pouco conhecido da propriedade CSS position: absolute; que lhe dará o layout que você está procurando. Você pode absolutamente posicionar um elemento em todas as 4 direções, superior, direita, inferior e esquerda. Isto significa que uma caixa pode ser tão fluido como o navegador e permanecer sempre a mesma distância das bordas do que do contêiner que você especificar.

div {
    position: absolute;
}
#main {
    top: 8em; // 8em
    left: 0; 
    bottom: 8em; // 8em
    right: 300px;
    overflow: auto;
}
#header {
    top: 0;
    left: 0;
    right: 0;
    height: 8em;
}
#sidebar {
    top: 8em;
    right: 0;
    bottom: 8em;
    width: 300px;
    overflow: auto;
}
#footer {
    bottom: 0;
    left: 0;
    right: 0;
    height: 8em;
}

Para um exemplo check-out http://www.sanchothefat.com/dev/ layouts / cssframes.html e depois ver fonte e separe o CSS para ver como ele é feito em um exemplo mais complexo.

Se você tomar essa abordagem, você tem que absolutamente posicionar todas as principais <div>s recipiente. Use ems se font-size é uma preocupação.

PS. Há uma pegadinha em que o IE6 mexe-se (choque!) No entanto, o exemplo que eu forneci tem um fallback IE6. Apenas uma altura fixa vai ficar bem embora.