Eu estou tentando definir uma div para uma certa altura percentual em CSS
Porcentagem de quê?
Para definir uma altura percentual, seu elemento pai (*) deve ter uma altura explícita. Isso é bastante evidente, pois se você deixar a altura como auto
, o bloco terá a altura do seu conteúdo ... mas se o conteúdo em si tiver uma altura expressa em termos de porcentagem do pai ou da mãe, você ficará um pouco Captura 22. O navegador desiste e apenas usa a altura do conteúdo.
Portanto, o pai da div deve ter uma height
propriedade explícita . Embora essa altura também possa ser uma porcentagem, se você quiser, isso apenas move o problema para o próximo nível.
Se você deseja tornar a altura da div uma porcentagem da altura da janela de exibição, todos os ancestrais da div, incluindo <html>
e <body>
, precisam ter height: 100%
, para que haja uma cadeia de alturas de porcentagem explícitas até a div.
(*: ou, se a div estiver posicionada, o 'bloco contendo', que é o ancestral mais próximo a ser posicionado também.)
Como alternativa, todos os navegadores modernos e o IE> = 9 oferecem suporte a novas unidades CSS relativas à altura da porta de visualização ( vh
) e largura da porta de visualização ( vw
):
div {
height:100vh;
}
Veja aqui para mais informações .
height
propriedade com valores percentuais: stackoverflow.com/a/31728799/3597276