Tornar o conteúdo HTML expandir para preencher a janela
Pergunta
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 ??li>
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?
Solução
Usando a altura:. 100% atributo CSS deve torná-lo trabalho
Dave Woods 100% Altura Disposição Usando CSS funciona para você .
Outras dicas
É 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.