Olha "não existe" essa coisa de boa pratica, existem caminhos melhores sim, mas não toda boa pratica atende a tudo.
Agora a única coisa que digo que deve evitar é fazer layout inteiros baseados em position: absolute;
, isso é bastante custoso.
Nota: isso que você quer na verdade nem é responsivo necessariamente
Aparentemente o objetivo é simples e dispensa position
, troque height
por min-height
e assim acaso o conteudo seja maior ele irá ajustar:
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.principal {
height: 100%;
}
.div1{
height: 10%;
background: red;
}
.div2{
min-height: 75%;
background: green;
}
.div3{
height: 15%;
background: yellow;
}
<div class="principal">
<div class="div1">a</div>
<div class="div2">b</div>
<div class="div3">c</div>
</div>
Eu usei min-height
apenas no div2
que é aonde vai o conteudo, mas se precisar ajustar os demais pode trocar os outros atributos height
por min-height
, veja o resultado com muito conteudo:
html, body{
height: 100%;
margin: 0;
padding: 0;
}
.principal {
height: 100%;
}
.div1{
height: 10%;
background: red;
}
.div2{
min-height: 75%;
background: green;
}
.div3{
height: 15%;
background: yellow;
}
<div class="principal">
<div class="div1">a</div>
<div class="div2">
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br> b <br>
</div>
<div class="div3">c</div>
</div>
Todavia isso não é bem responsivo e é complicado pra fixa uma altura por pixels por exemplo, então se necessitar veja as próximas (display: flex, display: table) sugestões
Usando display: flex
No caso eu diria que o melhor seria usar display: flex
, isto seria um exemplo funcional:
html,body {
margin: 0;
padding: 0;
height: 100%;
}
body > .section {
min-height: 100%;
}
.section {
padding: 5px;
box-sizing: border-box;
}
.header {
padding: 5px;
box-sizing: border-box;
border: 2px #f00 solid;
max-height: 46px;
}
.contents {
border: 2px #fc0 solid;
}
.contents, .section {
display: -webkit-flex;
display: flex;
flex-direction: column;
}
.header, .contents, .section {
-webkit-flex: 1; /* Safari 6.1+ */
-ms-flex: 1; /* IE 10 */
flex: 1;
}
<div class="section">
<div class="header">
navbar, etc
</div>
<div class="contents">
<h1>Teste</h1>
<div class="section">
<div class="header">
navbar, etc
</div>
<div class="contents">
<h1>Teste</h1>
</div>
</div>
</div>
</div>
Mas o problema é que ele não é suportado por todos navegadores, veja a lista de suporte no canIUse:
- Safari 6, Safari iOS6: Suporta apenas a antiga especificação do flexbox e não suporta
flex-wrap
.
- IE 10 Mobile: Suporta somente a sintaxe 2012
- IE 10 e IE 11 Suporte parcial e apresenta vários bugs
- IE 8, IE 9 e Opera Mobile 12 não suportam o flex
- No Safari (talvez tenha sido corrigido já) a altura dos elementos filhos sem flex em um elemento com flex não conseguem trabalhar com porcentagem, no entanto funciona normalmente em outros navegadores.
Usando display: table
Como alternativa ao flex que funciona seria interessante usar display: table
, todavia isso é mais usado como um "hack" e o funcionamento destinado do display: table
na verdade seria mais para conseguir efeitos como dados tabulares.
O display: table
também apresenta comportamento que irá limitar ou afetar outros elementos, então ele não pode ser usado a torta e direita
Importante nota: usar display: table
sozinho poderá ocasionar vários comportamentos inesperados (na verdade esperados pras tabelas), o que irá afetar diretamente o conteúdo e irá dificultar muito trabalhar o layout, levando você a ter que criar outras gambiarras na tentativa de corrigir isto, então pra evitar este tipo de situação sempre use table-row
e table-cell
.
Um exemplo com
html, body{
margin: 0;
padding: 0;
height: 100%;
}
.section {
width: 100%;
height: 100%;
border: 5px #00f solid;
display: table;
box-sizing: border-box;
}
.row {
border: 5px #f00 solid;
display: table-row;
}
.cell {
display: table-cell;
}
.header {
padding: 5px;
box-sizing: border-box;
border: 5px #000 solid;
height: 46px;
}
.footer {
padding: 5px;
box-sizing: border-box;
border: 5px #000 solid;
height: 46px;
}
.contents {
border: 5px #fc0 solid;
height: 100%;
}
<div class="section">
<div class="row">
<div class="cell header">
header
</div>
</div>
<div class="row">
<div class="cell contents">
<div class="section">
<div class="row">
<div class="cell header">
header
</div>
</div>
<div class="row">
<div class="cell contents">
contents
</div>
</div>
<div class="row">
<div class="cell footer">
footer
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="cell footer">
footer
</div>
</div>
</div>
Nota final
Não existe um caminho mágico ou regra especifica, você define como quer e isso também irá variar do suporte do browser, mas digo uma coisa do meu ponto de vista, usar altura 100% pode até parecer bonito em uma tela de 15 e 17 polegadas, mas telas maiores poderá causar um efeito de vazio estranho, tirando o rodapé principal do site (que seria legal fixar no "bottom") e background
eu recomendaria que não se preocupar em fazer o conteudo ficar com 100% de altura, algo como isto já bastaria:
html, body{
margin: 0;
padding: 0;
height: 100%;
}
body > .main {
position: relative;
min-height: 100%;
}
body > .main > .footer {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
background: #fc0;
}
.footer .content {
padding: 15px;
}
<div class="main">
<div class="section">
<h1>teste</h1>
</div>
<div class="footer">
<div class="content">teste</div>
</div>
</div>