diferença entre css height: 100% vs height: auto

167

Fui perguntado em uma entrevista que "qual é a diferença entre o css height:100%e height:auto?"

Alguém pode explicar?

css Gowsikan
fonte

Respostas:

236

height: 100% fornece ao elemento 100% de altura de seu contêiner pai.

height: auto significa que a altura do elemento dependerá da altura de seus filhos.

Considere estes exemplos:

altura: 100%

<div style="height: 50px">
    <div id="innerDiv" style="height: 100%">
    </div>
</div>

#innerDiv terá height: 50px

height: auto

<div style="height: 50px">
    <div id="innerDiv" style="height: auto">
          <div id="evenInner" style="height: 10px">
          </div>
    </div>
</div>

#innerDiv terá height: 10px

Manish Mishra
fonte
5
Eu acho que no caso de 'height: auto #innerDiv será 10px + the size it needs for its own content- veja este jsfiddle
BornToCode
@Manish Mishra: Qual é o melhor design responsivo? Definindo a altura do elemento filho ou do elemento contêiner e deixando o outro derivar sua altura?
John Strood
@ DJ, tudo depende da aparência, comportamento e comportamento que você espera do seu design em várias telas e, consequentemente, escreve seu css. Não existe uma regra global genérica como setting the height of the child element or the container element. Você pode fazer o que for necessário para alcançar seu design, desde que siga certa consistência, evitando duplicação, reduzindo o retrabalho e agrupando layouts comuns. Em suma, deve haver um sistema / padrão para o seu trabalho, de modo que é fácil de ler e alterar, e, claro, o fato de que SHD trabalho
Manish Mishra
2
Eu acho que uma boa maneira de pensar sobre o automóvel é que você está 'desanimando' - é como não tê-lo definido.
Niico 06/10
1
Modifiquei o violino que o BornToCode compartilhou acima, para tornar mais óbvio que autofaz com que o elemento cresça para acomodar AMO seu conteúdo E o conteúdo de seu filho. Por outro lado, um valor de altura fixa não aumenta (ou mostra) conteúdo que não pode caber na altura declarada. jsfiddle.net/m3f8y6xr/1 Esta resposta, creio, não é suficientemente redigida para torná-lo ovbious que o elemento crescerá para incluir todo o conteúdo, se é seu próprio texto, ou o conteúdo de uma criança. Obviamente, pode-se argumentar que seu próprio texto também é uma criança. Isso fornece confirmação visual do comportamento.
SherylHohman 02/04/19
5

Uma altura de 100% para é, presumivelmente, a altura da janela interna do seu navegador , porque essa é a altura do pai , a página. Uma autoaltura será a altura mínima do necessário para conter .

Rohit Azad
fonte
3
Isso não é necessariamente correto se o elemento pai é um com uma altura definida que não se encaixa com o tamanho da janela do navegador
goonerify
1

O padrão é height: autono navegador, mas height: X%Define a altura em porcentagem do bloco que o contém.

Vahid Heydarinezhad
fonte
0

height: 100% funciona se o contêiner pai tiver uma propriedade height especificada, não funcionará

Chukwuemeka
fonte