Porcentagem Altura HTML 5 / CSS

176

Eu estou tentando definir um <div>para uma certa altura percentual em CSS, mas ele permanece o mesmo tamanho que o conteúdo dentro dele. Quando eu removo o HTML 5 <!DOCTYTPE html>, no entanto, ele funciona, <div>ocupando a página inteira conforme desejado. Quero que a página valide, então o que devo fazer?

Eu tenho esse CSS no <div>, que tem um ID de page:

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
html css height D. Strout
fonte
3
Aqui está uma simples e clara explicação do CSS heightpropriedade com valores percentuais: stackoverflow.com/a/31728799/3597276
Michael Benjamin
soluciona o problema do DOCTYPE: stackoverflow.com/a/32215263/3597276
Michael Benjamin

Respostas:

371

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 heightpropriedade 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 .

bobince
fonte
Apesar de não trabalhar para orientação da tela Retrato stackoverflow.com/questions/23198237/...
Dchris
1
Por favor, veja a resposta de Brian Campbell abaixo. Acredito que essa seja a solução correta. Esta resposta parece ser uma solução alternativa e não resolve o problema real.
MG Developer
69

Você precisa definir a altura nos elementos <html>e <body>também; caso contrário, eles serão grandes o suficiente para caber no conteúdo. Por exemplo :

<!DOCTYPE html>
<title>Example of 100% width and height</title>
<style>
html, body { height: 100%; margin: 0; }
div { height: 100%; width: 100%; background: red; }
</style>
<div></div>
Expandir snippet

Brian Campbell
fonte
6
¬_¬ Levei 20 minutos para descobrir que eu também precisava definir a altura do documento para 100%. Eu li isso um pouco tarde demais, mas ainda é muito brilhante. sigh
omninonsense
Este deve ser votado como resposta, pois dá uma solução para muitas pessoas que vêm aqui querendo saber o que pode ser feito mais assistir a primeira resposta e acho que não é possível e vagar off pensar se existe qualquer outro método sem ler este
codefreaK
Concordo que esta é a resposta correta, a altura não funciona porque o elemento pai que é body e html precisa ser definido. Esta resposta deve ser a resposta aceita.
MG Developer
Esta não é uma resposta correta - se o conteúdo for maior que a altura da tela, o restante do conteúdo não estará mais visível, portanto, a altura NÃO foi definida para 100% da janela do navegador, mas novamente para 100% de conteúdo. Talvez isso não seja lógico, mas é o que acontece nos dois principais navegadores, Firefox e Chrome - apenas experimente. Assim, a resposta aceita é a única correta.
Nepdev 21/12/19
15

A resposta de bobince informará em quais casos "height: XX%;" vai ou não vai funcionar.

Se você deseja criar um elemento com uma proporção definida (altura:% de sua própria largura), a melhor maneira de fazer isso é definindo efetivamente a altura usando padding-bottom. Exemplo para quadrado:

<div class="square-container">
  <div class="square-content">
    <!-- put your content in here -->
  </div>
</div>

.square-container {  /* any display: block; element */
  position: relative;
  height: 0;
  padding-bottom: 100%; /* of parent width */
}
.square-content {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: 100%;
}

O contêiner quadrado será feito apenas de preenchimento e o conteúdo será expandido para preenchê-lo. Artigo longo de 2009 sobre este assunto: http://alistapart.com/article/creating-intrinsic-ratios-for-video

Olex Ponomarenko
fonte
isso funciona muito bem. Também parece rápido no navegador enquanto redimensiona uma página com mais de 100 elementos. obrigado!
Grande reitor
5

Você pode usar 100vw / 100vh. CSS3 nos fornece unidades relativas à janela de visualização. 100vw significa 100% da largura da janela de visualização. 100vh; 100% da altura.

    <div style="display:flex; justify-content: space-between;background-color: lightyellow; width:100%; height:85vh">
        <div style="width:70%; height: 100%; border: 2px dashed red"></div>
        <div style="width:30%; height: 100%; border: 2px dashed red"></div>
    </div>
Ahmad Aghazadeh
fonte
4

Oi! Para usar a porcentagem (%), você deve definir a% do elemento pai. Se você usar body {height: 100%}, ele não funcionará porque o pai não tem porcentagem de altura. Nesse caso, para trabalhar com a altura do corpo, você deve adicioná-lo em html {height: 100%}

Em outro caso, para se livrar dessa porcentagem pai definidora, você pode usar

corpo {altura: 100vh}

vh significa altura da janela de visualização

Eu acho que ajuda

Md. A. Barik
fonte
2

Às vezes, convém definir condicionalmente a altura de uma div, como quando todo o conteúdo é menor que a altura da tela. Definir todos os elementos pai como 100% cortará o conteúdo quando for maior que o tamanho da tela.

Portanto, a maneira de contornar isso é definir a altura mínima:

Continue permitindo que os elementos pai ajustem automaticamente sua altura. Em sua div principal, subtraia os tamanhos de pixel da div de cabeçalho e rodapé de 100vh (unidades de janela de visualização). Em css, algo como:

altura mínima: calc (100vh - 246px);

100vh é o comprimento total da tela, menos os divs circundantes. Ao definir altura mínima e não altura, o conteúdo maior que a tela continuará fluindo, em vez de ser cortado.

Jahmic
fonte