8

Fiz esse código que deixa o height responsivo, ele se ajusta de acordo com o tamanho do viewport. (Rodem o snippet e redimensionem a tela).

Considerando que o html e o body possuem um height: 100%, montei um esqueleto básico com 3 divs e fui distribuíndo esse height:100% entre elas (como vocês podem ver no snippet). Após isso, dei um position:absolute para cada div e um top de acordo com o tamanho de cada.

Bom, como atribui o top para cada div na mão, fiquei com a sensação de que isso pode ser um armengue, pois se houverem mais divs, eu terei que fazer esse cálculo para o topnovamente. Penso que hajam melhores formas de fazer isso...

Sendo assim, de quais outras maneiras eu posso fazer isso? Esse jeito que fiz, pode ser considerado um armengue?

html, body{
	width: 100%;
	height: 100%;
	margin: 0;
	padding: 0;
}

.div1{
	position: absolute;
	width: 100%;
	height: 10%;
	background: red;
}

.div2{
	position: absolute;
	top: 10%;
	width: 100%;
	height: 75%;
	background: green;
}

.div3{
	position: absolute;
	top: 85%;
	width: 100%;
	height: 15%;
	background: yellow;
}
<div class="principal">
	<div class="div1"></div>
	<div class="div2"></div>
	<div class="div3"></div>
</div>

1
  • 1
    Atualizei a resposta, por favor teste os dois primeiros exemplos, devem resolver, me avise qualquer coisa ;)
    – Syzoth
    Commented 4/08/2016 às 19:28

2 Respostas 2

10

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:

  1. Safari 6, Safari iOS6: Suporta apenas a antiga especificação do flexbox e não suporta flex-wrap.
  2. IE 10 Mobile: Suporta somente a sintaxe 2012
  3. IE 10 e IE 11 Suporte parcial e apresenta vários bugs
  4. IE 8, IE 9 e Opera Mobile 12 não suportam o flex
  5. 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>

2
  • 1
    Exato Guilherme, utilizar o position:absolute e ir ajustando as alturas na mão grande além de não ser o modo ideal, dá muito mais trabalho de ajustar cada item. Mesmo com o problema de incompatibilidade do IE, a solução ideal e que necessita de menos ajustes é utilizar o Flex. Vou pesquisar mais a respeito das suas funcionalidades. Muito obrigado pela sua ajuda!
    – Zkk
    Commented 5/08/2016 às 20:01
  • 1
    Sim, todavia aonde escrevi "Nota final" pode ser um fator que pode lhe ajudar, vai depender do projeto também :)
    – Syzoth
    Commented 5/08/2016 às 20:03
2

Você pode otimizar fazendo dessa forma:

html,
body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}
section {
  position: relative;
  display: table;
  height: 100%;
  width: 100%;
}
section div {
  float: left;
  width: 100%;
}
section div:first-child {
  height: 10%;
  background: red;
}
section div:nth-child(2) {
  height: 75%;
  background: green;
}
section div:last-child {
  height: 15%;
  background: yellow;
}
<section>
  <div></div>
  <div></div>
  <div></div>
</section>

2
  • Um bom exemplo, apenas um adendo, usar somente o display: table; poderá causar efeitos inesperados no conteúdo.
    – Syzoth
    Commented 3/08/2016 às 17:41
  • Certamente @GuilhermeNascimento, fiz somente a otimização básica do código já postado. Commented 4/08/2016 às 1:11

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .