Percentagem Altura HTML 5 / CSS

StackOverflow https://stackoverflow.com/questions/1622027

  •  06-07-2019
  •  | 
  •  

Pergunta

Estou tentando definir uma <div> a uma certa altura percentual em CSS, mas ele simplesmente continua a ser o mesmo tamanho que o conteúdo dentro dela. Quando eu remover o <!DOCTYTPE html> HTML 5 no entanto, ele funciona, o <div> ocupando toda a página como desejado. Eu quero a página para validar, então o que devo fazer?

Eu tenho essa CSS na <div>, que tem um ID de page: 

#page {
    padding: 10px;
    background-color: white;
    height: 90% !important;
}
Foi útil?

Solução

Estou tentando definir uma div a uma certa altura percentual em CSS

Porcentagem de quê?

Para definir uma altura percentual, seu elemento pai (*) deve ter uma altura explícita. Isto é bastante evidente, em que se você deixar altura que auto, o bloco terá a altura de seu conteúdo ... mas se o conteúdo em si tem uma altura expressa em termos de percentagem do pai que você fez-se um pouco prendedor 22. o navegador desiste e só usa a altura do conteúdo.

Então, o pai do div deve ter uma propriedade height explícito. Enquanto que a altura também pode ser uma percentagem, se quiser, que só se move o problema até o próximo nível.

Se você quiser fazer a altura div uma porcentagem da altura janela, cada antepassado do div, incluindo <html> e <body>, tem que ter height: 100%, para que haja uma cadeia de alturas percentuais explícitas para baixo para o div.

(*:. Ou, se a div é posicionado, o ‘bloco contendo’, que é a mais próxima ao antepassado também ser posicionado)

Como alternativa, todos os navegadores modernos e IE suporte> = 9 novas unidades CSS relativos à altura do visor (vh) e largura viewport (vw): 

div {
    height:100vh; 
}

Veja aqui para mais informações .

Outras dicas

Você precisa definir a altura dos elementos <html> e <body> bem; caso contrário, eles só será grande o suficiente para caber o 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>

A resposta de bobince vai deixar você saber em que casos "height: XX%;" vai ou não vai funcionar.

Se você quiser criar um elemento com uma proporção definida (altura:% de seu próprio largura), a melhor maneira de fazer isso é através da criação de forma eficaz a altura usando padding-bottom. Exemplo de 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 recipiente quadrado só vai ser feito de estofo, eo conteúdo será expandida para preencher o recipiente. longo artigo de 2009 sobre este assunto: http://alistapart.com/article/creating-intrinsic-ratios- para-video

Você pode usar 100vw / 100vh. CSS3 nos dá unidades viewport-relativas. 100vw meios 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>

Às vezes, você pode querer definir condicionalmente a altura de uma div, como quando todo o conteúdo é menor do que a altura da tela. Definir todos os elementos pai a 100% vai cortar conteúdo quando ele é maior que o tamanho da tela.

Assim, a maneira de contornar este problema é definir o min-height:

Continuar para permitir que os elementos pai ajustar automaticamente a sua altura Então, em sua div principal, subtrair os tamanhos de pixel do cabeçalho e rodapé div de 100vh (unidades de visor). Em CSS, algo como:

min-altura: calc (100vh - 246px);

100vh é o comprimento total da tela, menos os divs circundantes. Ao definir min-height e não altura, índice maior do que a tela continuará a fluir, em vez de ficar cortada.

Hi! A fim de porcentagem utilização (%), você deve definir o% do mesmo elemento pai. Se você usar body {height: 100%} não vai funcionar porque pai tem nenhuma porcentagem de altura. Nesse caso, a fim de trabalho que altura do corpo você deve adicionar isso em html {height: 100%}

Em outro caso de se livrar desse percentual pai definindo você pode usar

body {height: 100vh}

vh significa altura janela

Eu acho que ajuda

Licenciado em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top