Depois de testar vários cenários, acredito que esta é a melhor solução:
html {
width: 100%;
height: 100%;
display: table;
}
body {
width: 100%;
display: table-cell;
}
html, body {
margin: 0px;
padding: 0px;
}
É dinâmico em que as html
e os body
elementos irá expandir automaticamente se o seu conteúdo estouro. Testei isso na versão mais recente do Firefox, Chrome e IE 11.
Veja o violino completo aqui (para seus inimigos de mesa por aí, você sempre pode alterá-lo para usar uma div):
https://jsfiddle.net/71yp4rh1/9/
Com isso dito, há vários problemas com as respostas postadas aqui .
html, body {
height: 100%;
}
O uso do CSS acima fará com que o html e o elemento body NÃO se expandam automaticamente se o conteúdo exceder, como mostrado aqui:
https://jsfiddle.net/9vyy620m/4/
Ao rolar, observe o fundo repetitivo? Isso está acontecendo porque a altura do elemento do corpo NÃO aumentou devido ao transbordamento da tabela filho. Por que não se expande como qualquer outro elemento de bloco? Não tenho certeza. Eu acho que os navegadores lidam com isso incorretamente.
html {
height: 100%;
}
body {
min-height: 100%;
}
Definir uma altura mínima de 100% no corpo, como mostrado acima, causa outros problemas. Se você fizer isso, não poderá especificar que uma div ou tabela filha ocupe uma altura percentual, conforme mostrado aqui:
https://jsfiddle.net/aq74v2v7/4/
Espero que isso ajude alguém. Eu acho que os navegadores estão lidando com isso incorretamente. Eu esperaria que a altura do corpo se ajustasse automaticamente a crescer cada vez mais se seus filhos transbordassem. No entanto, isso não parece acontecer quando você usa 100% de altura e 100% de largura.