Logo do siteSilhueta da face do Maujor seguida do texto Maujor o dinossauro das CSS

Menu hamburger Três barras horizontais na cor laranja destinadas a ser clicada para abrir o menu menu do site

Você está no BLOG do Maujor. IR PARA O SITE

Por que height: 100% não funciona?

Publicado em: 2013-03-8 — 83.598 visualizacoes         

Uma das declarações CSS campeã, senão a campeã absoluta, das reclamações de iniciantes (e até de alguns com alguma prática em CSS) é a declaração: height: 100%;.
É muito comum encontrar-se em fóruns, listas de discussão e redes sociais perguntas do tipo:

“Já declarei height: 100% na minha CSS e o div não estende verticalmente como ‘era de se esperar’. Alguma dica?”.

ou respostas do tipo:

“Declara height: 100% e o div fica responsivo na vertical.”

O problema não é com o funcionamento da propriedade, pois ela foi criada para estender a altura de um box exatamente 100% como, realmente, era de se esperar.

Então, o que há de errado?
Nada há de errado, mas antes de mais nada é preciso entender como funciona a propriedade height.

É sabido que a medida CSS (ou qualquer medida) expressa em porcentagem precisa de uma referência para ser calculada, pois trata-se de uma medida relativa, ou seja, tomada em relação a alguma coisa.

width: 100%

No Box Model CSS um box tem sua largura inicial (width) definida como auto que por padrão é tomada como sendo toda a largura da viewport. Se o usuário redimensiona a janela do navegador altera dinamicamente a largura da viewport e em consequência a largura auto do box para um valor conhecido igual a largura atual da viewport (tantos pixels, por exemplo). É importante notar que o valor auto para a largura de um box é um valor perfeitamente determinado e conhecido, igual a largura da viewport.

A referência para cálculo da largura, expressa em porcentagem, de um box, é a largura do seu elemento-pai. Assim, um box com width: 50% que seja filho de um container com width: 200px, possui uma largura igual a 50% de 200px = 100px. Elementar e fácil!

E, se a largura do elemento-pai não for definida? Como é feito o cálculo?

Se a largura do elemento-pai não for definida explicitamente ela é, por padrão, tomada como auto.

E, se não houver elemento ancestral com largura definida?

Nesse caso, está implícito que a largura de todos os ancestrais é auto, ou seja a referência para cálculo da porcentagem é a largura da viewport, pois como já dissemos, para a propriedade width o valor auto é igual a largura da viewport.

Nessas condições um box com largura de 25% (width: 25%) ocupará sempre 1/4 da largura da viewport. Se o usuário redimensiona a janela a largura se ajusta dinamicamente.

height: 100%

No Box Model CSS um box tem sua altura inicial (height) definida como auto e, ao contrário da propriedade width, por padrão NÃO é tomada como sendo toda a altura da viewport. Para a propriedade height o valor auto, por padrão, é tomado como aquele necessário para acomodar verticalmente o conteúdo e depende de outros fatores como, por exemplo, a largura do box.

A referência para cálculo da altura, expressa em porcentagem, de um box, é a altura do seu elemento-pai. Assim, um box com height: 50% que seja filho de um container com height: 200px, possui uma altura igual a 50% de 200px = 100px. Elementar e fácil!

E, se a altura do elemento-pai não for definida? Como é feito o cálculo?

Nesse caso, está implícito que a altura do elemento-pai é auto (indefinido) e qualquer porcentagem de indefinido resulta em indefinido. A declaração CSS não é aplicada e quem determina a altura é o conteúdo. Eis porque height: 100% não funciona.

Fazendo height: 100% funcionar

Considere a teoria explicada e não esqueça que os elementos html e body são os ancestrais mais distantes de qualquer elemento no documento.

Em qualquer estrutura HTML ao definirmos a altura de um elemento em porcentagem é necessário que seu elemento-pai tenha sua altura definida. Se a altura definida para o elemento-pai for em medida absoluta a porcentagem é tomada em relação a essa medida e fim de papo.

Contudo se a altura do elemento-pai for definida em porcentagem, é preciso examinar a definição da altura do ancestral (elemento-pai do elemento-pai), repetindo-se o processo até chegar ao elemento raiz html.

Se nessa cadeia de ancestrais qualquer um deles não tiver sua altura definida, as definições de altura em porcentagem para todos os seus descendentes não são consideradas, pois como vimos anteriormente não definir altura equivale ao valor auto para ela (que é indefinido). Eis porque height: 100% não funciona.

Exemplos

Para demonstrar o funcioanamento da declaração height: 100% conforme a teoria relatada nessa matéria criei páginas de exemplos:

As páginas mostram um elemento div com a classe um (div.um) e respectivo conteúdo, ao qual pretendemos estender a altura por toda a altura da viewport.
A primeira tentativa é simplesmente declarar a regra de estilo: .um { height: 100%; }. Não vai funcionar, pois o elemento-pai do div.um (body) não tem sua altura declarada.
Ver Exemplo 1 (abre em nova janela).

Para funcionar precisamos declarar a altura de TODOS os elementos ancestrais de div.um. São eles: body e html.
Ver Exemplo 2 (abre em nova janela).

Talvez você seja tentado a declarar: * { height: 100%; } na esperança de normatizar alturas. Ou ainda, declarar height: 100%; para todos os elementos de um trecho do DOM onde irá precisar de altura estendida. Tal procedimento poderá causar a maior confusão no seu layout.

Se um elemento ao qual se pretende declarar height: 100% contiver margens e/ou paddings verticais na renderização final irá aparecer barra de rolagem vertical, pois o cálculo da porcentagem se faz primeiro e depois são acrescidas as margens e/ou paddings.
Ver Exemplo 3 (abre em nova janela). Observe a barra de rolagem no navegador.

Para eliminar as barras de rolagem devemos subtrair o valor total das margens e/ou paddings verticais de 100%. Caso aqueles espaçamentos sejam definidos em porcentagem simplesmente diminuá-os de 100%, caso em outra unidade de medida use a função calc() das CSS (abre em nova janela).
Ver Exemplo 4 (abre em nova janela). Observe a ausência de barra de rolagem no navegador.

Atualização: Conforme apontado pelo James Clébio no comentário no. 7 podemos usar a propriedade box-sizing em lugar da função calc().

Conclusão

Fazer funcionar height: 100% para um box é fácil, basta declarar explicitamente (não pode ser auto) o valor da altura de TODOS os elementos ancestrais. Difícil é tratar as implicações que isso poderá acarretar para o layout.

Assim, declarar height: 100% é de uso restrito a uns poucos casos particulares e, definitivamente, não é a solução para todos os seus problemas de altura CSS.

Mas, nem tudo está perdido. As especificações para CSS Flexible Box Layout Module já se encontra na fase de Candidata a Recomendação. Entre as funcionalidades dessa especificação destacamos aquelas que permitem um maior controle sobre as dimensões de um box sem dependências com elementos a ele relacionados na marcação.

Atualização em 24/07/2015: (Merci @johnnybegood_21) A especificação do W3C denominada CSS Values and Units Module Level 3 já se encontra na fase de Candidata a Recomendação. Entre as funcionalidades daquela especificação estão previstas as unidades de medidas cujo valor é uma porcentagem da largura ou da altura da viewport (mais informações em Viewport-percentage lengths: the ‘vw’, ‘vh’, ‘vmin’, ‘vmax’ units).

Essa unidade de medida é bem suportada nos navegadores atuais.
Ver Exemplo 5 (abre em nova janela).

Este tutorial foi traduzido para o francês por @pierrechoffe.

Se não sabia, agora você já sabe porque height: 100% “não funciona”!

Livros do Maujor

Desenvolvimento com Padrões Web? Adquira os livros do Maujor
Clique a "capinha" para visitar o site do livro.

capa livro jQuery   capa livro ajaxjQuery   capa livro css   capa livro html   capa livro javascript   capa livro html5   capa livro css3   capa livro jQuery Mobile   capa livro jQuery UI   capa livro SVG   capa livro RWD   capa livro foundation   capa livro HTML5 e CSS3   capa livro Bootstrap3   capa livro Sass e Compass

Esta matéria foi publicada em: 2013-03-8 (sexta-feira). Subscreva o feed RSS 2.0 para comentários.
Comente abaixo, ou link para http://www.maujor.com/blog/2013/03/08/por-que-height-100-nao-funciona/trackback no seu site.

45 comentários na matéria: “Por que height: 100% não funciona?”

  1. Henrique PessoaNo Gravatar disse:

    Maravilhoso!
    2017 e esse post me ajudou.

    Muito obrigado, amigo! ;))

  2. AdrianoNo Gravatar disse:

    Obrigado Maujor 🙂 eu adorei esse tutorial estou lendo todo esse site com conteúdos muito bem explicados e com boa informações.

  3. WellingtonNo Gravatar disse:

    …ou pode simplesmente usar o vw/vh (visual width,visual height) que simplesmente pega o tamanho do viewport sem nenhuma dependência, sendo que height:100vh corresponde ao tamanho total da tela (do mesmo jeito que esperam que height:100% funcione).

  4. Guilherme LuisNo Gravatar disse:

    Obrigado Maujor te amo kk

  5. Ciro PeixotoNo Gravatar disse:

    Maravilha! – Ótimo tutorial sobre algo que sempre me deu dor de cabeça! – Obrigado

  6. Derik MacedoNo Gravatar disse:

    Top!

    usei a unidade vh e matou um problemão que estava passando.

  7. DiDINo Gravatar disse:

    Para nao usar o calc()
    basta por na DIV a propriedade box-sizing: border-box;
    o padding ira se aplicado no interior da DIV e nao fora

  8. DeângeloNo Gravatar disse:

    Muito legal seu artigo, bem proveitoso.

  9. FernandoNo Gravatar disse:

    top artigo!

  10. ThalysNo Gravatar disse:

    Top, a tempos não sabia o porque isso acontecia…

  11. DanielNo Gravatar disse:

    Muito obrigado! didatica excelente, me ajudou bastante

  12. SérgioNo Gravatar disse:

    O que faço para aumentar a altura do meu cabeçalho? Retirei a descrição do site utilizando display: none; e agora ele ficou estreito, não mostra a figura inteira.

    http://administracaoesucesso.com/

    Tema Hemingway

  13. MauricioNo Gravatar disse:

    Esse Maujor é simplesmente genial. Que didática. Consegue expressar muito bem em palavras o que outros não chegam nem perto com vídeos superproduzidos.

  14. SadaoNo Gravatar disse:

    Muito bom artigo, parabéns!
    Me ajudou aqui num trabalho do projeto.
    Obg!

  15. Design Responsivo na prática - Usando porcentagem | Bitmap • Design Digital disse:

    […] Para saber mais: tutorial sobre definição de width e height em porcentagem […]

  16. Fernando OliveiraNo Gravatar disse:

    Perfeito esta matéria.
    Objetiva e direta, mais acima de tudo explica o conceito !

    Muito Bom!

  17. Sérgio santanaNo Gravatar disse:

    o height 100 % funciona se vc usar o position:absolute;

    sim, para usar porcentagem no height é necessário uma referencia, mas vc pode criar essa referencia tambem, por exemplo, criando uma div master com height e width 100% usando position absolute, depois se o height em outras divs poderia ser usado em porcentagem normalmente, pois ele usaria a master como referencia. Eu uso assim e funciona perfeitamente

  18. Edvaldo PerreiraNo Gravatar disse:

    Obrigado amigo!

    Parabéns pelo seu site e por compartilhar seu conhecimento com a gente! abraços!

  19. ClarissaNo Gravatar disse:

    Obrigada pela informção, eu tive alguns problemas com as declarações de height!

  20. RonnyNo Gravatar disse:

    Colocando os “box-sizing” no * { } teria algum problema de incompatibilidade nos browsers modernos?

  21. EzequielNo Gravatar disse:

    Exelente artigo, esclareceu minhas dúvidas, porém gerou uma outra.

    Acessei o link http://maujor.com/blog/pg_apoio/height100/exemplo4.html e está funcionando o heigth 100%, porém se diminuo o tamanho da tela para uns 250px e recarrego a página, a div fica cortada.
    É possível o heigth assumir 100% apenas quando o conteúdo for menor que o tamanho da tela e caso contrário assumir o tamanho do conteúdo?

  22. Heber LourençãoNo Gravatar disse:

    Ótimo artigo, muito esclarecedor para quem está iniciando.

    Porém, há algumas ressalvas: a função CALC não é suportada por navegadores mais antigos. Isso causa alguns problemas.

    Além disso a propriedade box-sizing pode ser utilizada com mais eficiência e tem um melhor suporte por navegadores um pouco mais antigos.

  23. RafaelNo Gravatar disse:

    Excelente post.
    Didático e funcional.
    O que eu realmente procurava!

    Obrigado.

  24. HelderSiNo Gravatar disse:

    Excelente tutorial! Estava quase desistindo quando encontrei seu tutorial kkkkk valeu mesmo.

  25. CamiloNo Gravatar disse:

    Valeeeeeeeeeeeu! Muito bom! O iniciante aqui agradece demais! Briguei muito tempo com os códigos por causa de uma coisa boba dessas!

  26. RafaeleNo Gravatar disse:

    Muito obrigada pelo artigo!! Faz tempo que quebro a cabeça com esse height e não fazia ideia do motivo de não funcionar. Agora eu aprendi!

  27. EdsonNo Gravatar disse:

    Rapaz euaheuaheuaheua’ Pensei q eu tava bugado kkk’
    Vlw por tirar essa duvida kk’ Show

  28. Felipe ManhãesNo Gravatar disse:

    Dá pra fazer funcionar o “height:100%” utilizando com “position:fixed” (testado no Chrome v28), pois ele encara o tamanho da janela como altura de referência. Daí, trabalhando com “margin” podemos posicionar o div onde quisermos. Foi o jeito que encontrei.

  29. HochNo Gravatar disse:

    Baah!

    Muito boa a explicação, sempre achei que tivessem posto uma propriedade que não funcionasse ou simplesmente descontinuado, agora vi que funciona \o/

    Vlw 😀

  30. Paulo RodriguesNo Gravatar disse:

    É por isso que sou fã do Maujor, sempre que tou com uma duvida ponho a dúvida e o nome dele no google, é impressionante como ele sempre tem uma resposta!

  31. RômuloNo Gravatar disse:

    Se eu utilizar o parâmetro ‘height: 100%’, o tamanho da caixa se estenderá também de acordo com o conteúdo que ela possui?

  32. FelipeNo Gravatar disse:

    Vinicius Cainelli

    Partindo do principio que o conteúdo será sempre maior do que o menu, defina a cor de fundo do elemento “.main” para branco e a do elemento “.content” para cinza.

    Veja se resolve sim?

    Abraços.

  33. NataliaNo Gravatar disse:

    Vc sempre me tira das piores enrascadas.. Muito obrigada! 😀

  34. Vinicius CainelliNo Gravatar disse:

    Maujor, apliquei essa técnica em um projeto que estou desenvolvendo, funcionou como você explicou no tutorial, porém, tive um problema com a altura.

    Se puder acessar: http://codepen.io/vicainelli/full/gpvcB

    Vai ver que se rolar o conteúdo pra baixo, a barra da esquerda, não acompanha a altura do conteúdo, ela somente acompanha a altura do navegador.

    Isso é assim, não existe uma técnica pra ajustar essa altura?

  35. WILLIAN HEBER FIGUEIREDO RODRIGUESNo Gravatar disse:

    muito bom

  36. AlexandreNo Gravatar disse:

    Excelente Maujor, parabéns pela matéria.

  37. Diego FernandesNo Gravatar disse:

    Excelente artigo. Explicado de forma bem clara e didática. Como bônus, acabei conhecendo a função calc()
    🙂

  38. MaujorNo Gravatar disse:

    @Clébio
    É uma boa solução, sem dúvida.
    O uso da função calc() no exemplo além de solucionar o problema tem a função de chamar a atenção dos meus leitores para mais uma funcionalidade das CSS3.

  39. James ClébioNo Gravatar disse:

    Post bem útil, Maujor! Porém no último exemplo eu optaria por usar box-sizing: border-box; no lugar de calc(). Dessa forma o efeito desejado seria o mesmo e eu não precisaria especificar manualmente a diferença dos paddings… Assim ó: http://jsfiddle.net/jamesclebio/feJVG/

    ;D

  40. Pedro DiasNo Gravatar disse:

    Excelente post, Maujor! Didática perfeita e de fácil entendimento.
    ps: não conhecia esta função (calc()) da CSS3. Show 🙂

  41. MaderaNo Gravatar disse:

    Por isso adoro seus livros. Didática_perfeita.

  42. Alex SOuzaNo Gravatar disse:

    Que didatica perfeita majour.
    Sempre quebrei a cabeça com isso. TInha uma idéia de que era sim, mas era uma idéia nebulosa na mente. Teoria de quem aprendeu na prática, e usou meios alternativos pra não ter que estudar o tema a fundo. rsrsrs.

    Valeu !!!!

  43. Newton HortaNo Gravatar disse:

    Grande Maujor,

    Excelente post. Meus parabéns.

  44. DanielNo Gravatar disse:

    Muito bom! Estou (estava) tendo este problema no meu site (www.marmitanacamg.com) vou aplicar essa propriedade hoje mesmo!

    Obrigado!

  45. Ivan OliveiraNo Gravatar disse:

    Explicação genial, parabéns Maujor por sua didática.

Comentário:





Teclar "Enter" cria um novo parágrafo. Teclar "Shift + Enter" causa uma quebra de linha.

Subscribe without commenting

topo