Como esticar uma tabela HTML para 100% da altura da janela do navegador?
-
01-07-2019 - |
Pergunta
Eu estou usando uma tabela para criar o layout de minha página web. Eu quero a tabela para preencher a página, mesmo que ele não contém muito conteúdo. Aqui está o CSS que estou usando:
html, body {
height: 100%;
margin: 0;
padding: 0;
}
#container {
min-height: 100%;
width: 100%;
}
E eu lugar algo como isto no código da página:
<table id="container">
<tr>
<td>
...
Isso funciona para Opera 9, mas não para Firefox 2 ou Internet Explorer 7. Existe uma maneira simples de fazer este trabalho solução para todos os navegadores populares?
(Adicionando id="container"
para td
não ajuda.)
Solução
Basta usar a propriedade height
em vez da propriedade min-height
ao definir #container
. Depois que os dados fica muito grande, a tabela vai crescer automaticamente.
Outras dicas
Tente usar o seguinte:
html, body {
height: 100%;
}
Assim, além de fazer a altura da tabela para 100%, você também deve ter a certeza de que o html'd e altura do corpo também são 100%, por isso vai esticar corretamente.