html - uma - height 100 not working




Faça uma div 100% de altura da janela do navegador (20)

Eu tenho um layout com duas colunas - uma div esquerda e uma div direita.

O direito div tem uma cor de background-color cinza, e eu preciso expandir verticalmente dependendo da altura da janela do navegador do usuário. Neste momento, a background-color termina na última parte do conteúdo dessa div .

Eu tentei a height:100% , min-height:100%; etc.


Este material irá redimensionar a altura do conteúdo automaticamente de acordo com o seu navegador. Espero que isso funcione para você. Apenas tente este exemplo dado abaixo.

Você tem que configurar apenas a height:100% .

  html,body {
  height:100%;
  margin:0;
}
.content {
  height:100%;
  min-height:100%;
  position:relative;
}
.content-left {
  height:auto;
  min-height:100%;
  float:left;
  background:#ddd;
  width:50%;
  position:relative;
}

#one {
  background: url(http://cloud.niklausgerber.com/1a2n2I3J1h0M/red.png) center center no-repeat scroll     #aaa;
  width:50%;
  position:relative;
  float:left;
}

#two {
 background: url(http://cloud.niklausgerber.com/1b0r2D2Z1y0J/dark-red.png) center center no-repeat scroll #520E24;
  width:50%;
  float:left;
  position:relative;
  overflow-y:scroll;  
}
<div class='content' id='one'></div>
<div class='content-left' id='two'></div>


100vw === 100% da largura da janela de visualização.

100vh === 100% da altura da janela de visualização.

Se você quiser definir a largura ou a altura div 100% do tamanho da janela do navegador, você deve usar

para largura: 100vw

para altura: 100vh

ou se você quiser definir um tamanho menor, use a calc function css calc function . Exemplo:

#example { width: calc(100vw - 32px) }


Aqui está algo que não é exatamente o que você tinha acima, mas poderia ser útil para alguns.

body {
  display: flex;
  flex-direction: column;
  height: 100vh;
  margin: 0px;
}

#one {
  background-color: red;
}

#two {
  margin-top: 0px;
  background-color: black;
  color: white;
  overflow-y: scroll;
}

https://jsfiddle.net/newdark/qyxkk558/10/


Aqui está uma correção para a altura.

Em seu uso de CSS:

#your-object: height: 100vh;

Para navegadores que não suportam vh-units , use modernizr.

Adicione este script (para adicionar detecção para vh-units )

// https://github.com/Modernizr/Modernizr/issues/572
// Similar to http://jsfiddle.net/FWeinb/etnYC/
Modernizr.addTest('cssvhunit', function() {
    var bool;
    Modernizr.testStyles("#modernizr { height: 50vh; }", function(elem, rule) {   
        var height = parseInt(window.innerHeight/2,10),
            compStyle = parseInt((window.getComputedStyle ?
                      getComputedStyle(elem, null) :
                      elem.currentStyle)["height"],10);

        bool= !!(compStyle == height);
    });
    return bool;
});

Finalmente, use esta função para adicionar a altura da viewport a #your-object se o navegador não suportar vh-units :

$(function() {
    if (!Modernizr.cssvhunit) {
        var windowH = $(window).height();
        $('#your-object').css({'height':($(window).height())+'px'});
    }
});

Existem algumas unidades de medição CSS3 chamadas:

Comprimentos de Porcentagem de Visualização (ou Viewport-Relative)

O que são comprimentos de porcentagem de viewport?

A partir da Recomendação do Candidato W3 relacionada acima:

Os comprimentos da porcentagem de viewport são relativos ao tamanho do bloco inicial contendo. Quando a altura ou a largura do bloco inicial inicial é alterada, elas são dimensionadas de acordo.

Essas unidades são vh (altura da vmin visualização), vw (largura da vmin visualização), vmin (comprimento mínimo da vmin visualização) e vmax (comprimento máximo da vmin visualização).

Como isso pode ser usado para fazer um divisor preencher a altura do navegador?

Para esta questão, podemos fazer uso de vh : 1vh é igual a 1% da altura da viewport. Ou seja, 100vh é igual à altura da janela do navegador, independentemente de onde o elemento está localizado na árvore DOM:

HTML

<div></div>

CSS

div {
    height:100vh;
}

Isso é literalmente tudo que é necessário. Aqui está um exemplo de JSFiddle deste em uso.

Quais navegadores suportam essas novas unidades?

Isso é atualmente suportado em todos os principais navegadores atualizados, além do Opera Mini. Check out Posso usar ... para suporte adicional.

Como isso pode ser usado com várias colunas?

No caso da questão em questão, com um divisor da esquerda e da direita, aqui está um exemplo de JSFiddle mostrando um layout de duas colunas envolvendo ambos vh e vw .

Como é 100vh diferente de 100% ?

Tome este layout por exemplo:

<body style="height:100%">
    <div style="height:200px">
        <p style="height:100%; display:block;">Hello, world!</p>
    </div>
</body>

A tag p aqui é definida como 100% de altura, mas como seu div contém 200px de altura, 100% de 200px se torna 200px, não 100% da altura do body . Usar 100vh significa que a tag p terá 100% de altura do body independentemente da altura do div . Dê uma olhada neste JSFiddle que acompanha para ver facilmente a diferença!


Existem vários métodos disponíveis para definir a altura de um <div> para 100%.

Método (A):

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100%;
  width: 50%;
  background: green;
}
.div-right {
  height: 100%;
  width: 50%;
  background: gray;
}
<div class="div-left"></div>
<div class="div-right"></div>

Método (B) usando vh:

html,
body {
  height: 100%;
  min-height: 100%;
}
.div-left {
  height: 100vh;
  width: 50%;
  background: green;
  float: left;
}
.div-right {
  height: 100vh;
  width: 50%;
  background: gray;
  float: right;
}
<div class="div-left"></div>
<div class="div-right"></div>

Método (c) usando flex box:

html,
body {
  height: 100%;
  min-height: 100%;
}
.wrapper {
  height: 100%;
  min-height: 100%;
  display: flex;
}
.div-left {
  width: 50%;
  background: green;
}
.div-right {
  width: 50%;
  background: gray;
}
<div class="wrapper">
  <div class="div-left"></div>
  <div class="div-right"></div>
</div>


Isso funcionou para mim:

html, body {
    height: 100%; /* IMPORTANT!!! stretches viewport to 100% */
}

#wrapper {
    min-height: 100%; /* min. height for modern browser */
    height:auto !important; /* important rule for modern Browser */
    height:100%; /* min. height for IE */
    overflow: hidden !important; /* FF scroll-bar */
}

Extraído desta página .


Isto é o que funcionou para mim:

<div style="position:fixed; top:0px; left:0px; bottom:0px; right:0px;"> </div>

Use position:fixed vez de position:absolute , dessa forma, mesmo se você rolar para baixo, a divisão se expandirá até o final da tela.


Na verdade o que funcionou melhor para mim é usar a propriedade vh, no meu aplicativo reagir queria que o div correspondesse a altura da página mesmo quando redimensionada tentei a altura: 100%; , overflow-y: auto; , nenhum deles funcionava ao definir altura: (seu percentual) vh; funcionou como pretendido. Nota: se você estiver usando preenchimento, cantos arredondados, etc, certifique-se de subtrair esses valores de você vh propriedade por cento ou adicionar altura extra e fazer barras de rolagem aparecer, aqui está minha amostra:

.frame {
  background-color: rgb(33, 2, 211);
  height: 96vh;
  padding: 1% 3% 2% 3%;
  border: 1px solid rgb(212, 248, 203);
  border-radius: 10px;
  display: grid;
  grid-gap: 5px;
  grid-template-columns: repeat(6, 1fr);
  grid-template-rows: 50px 100px minmax(50px, 1fr) minmax(50px, 1fr) minmax(50px, 1fr);

}

Se você puder posicionar seus elementos,

position: absolute;
top: 0;
bottom: 0;

faria isso.


Se você usa position: absolute; e jQuery, você poderia usar

$("#mydiv").css("height", $(document).height() + "px");

Tente definir a height:100% em html e body

html, 
body {
    height: 100%;
}

E se você quiser 2 div altura mesmo uso ou definir a display:flex elemento pai display:flex propriedade display:flex .


Todas as outras soluções, incluindo a mais votada com o vh são sub-ótimas quando comparadas com a solução do modelo flex .

Com o advento do modelo flex do CSS , resolver o problema da altura de 100% torna-se muito, muito fácil: use height: 100%; display: flex height: 100%; display: flex no pai e flex: 1 nos elementos filhos. Eles ocuparão automaticamente todo o espaço disponível em seu contêiner.

Note como é simples a marcação e o CSS. Nenhuma tabela hacks ou qualquer coisa.

O modelo flex é suportado por todos os principais navegadores , bem como pelo IE11 +.

html, body {
  height: 100%;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>

Saiba mais sobre o modelo flex aqui.


Uma das opções é usar a tabela CSS. Tem ótimo suporte ao navegador, até funciona no IE8.

Exemplo de JSFiddle

html, body {
  height: 100%;
  margin: 0;
}
.container {
  display: table;
  width: 100%;
  height: 100%;
}
.left, .right {
  display: table-cell;
  width: 50%;
}
.right {
  background: grey;
}
<div class="container">
  <div class="left"></div>
  <div class="right"></div>
</div>


Você pode usar display: flex e height: 100vh

html, body {
  height: 100%;
  margin: 0px;
}
body {
  display: flex;
}

.left, .right {
  flex: 1;
}

.left {
  background: orange;
}

.right {
  background: cyan;
}
<div class="left">left</div>
<div class="right">right</div>


Você pode usar vh neste caso, que é relativo a 1% da altura da viewport ...

Isso significa que se você quiser cobrir a altura, basta usar 100vh .

Veja a imagem que eu desenho para você aqui:

Experimente o snippet que criei para você como abaixo:

.left {
  height: 100vh;
  width: 50%;
  background-color: grey;
  float: left;
}

.right {
  height: 100vh;
  width: 50%;
  background-color: red;
  float: right;
}
<div class="left"></div>
<div class="right"></div>


Você pode usar o seguinte CSS para fazer um div 100% da altura da janela do navegador:

display: block;
position: relative;
bottom: 0;
height: 100%;

Você precisa fazer duas coisas, uma é definir a altura para 100% que você já fez. Em segundo lugar, defina a posição como absoluta. Isso deve fazer o truque.

html,
body {
  height: 100%;
  min-height: 100%;
  position: absolute;
}

Source


Use o FlexBox CSS

Flexbox é um ajuste perfeito para este tipo de problema. Embora conhecido principalmente por apresentar conteúdo na direção horizontal, o Flexbox na verdade funciona tão bem quanto para problemas de layout vertical. Tudo o que você precisa fazer é envolver as seções verticais em um contêiner flexível e escolher quais deseja expandir. Eles ocuparão automaticamente todo o espaço disponível em seu contêiner.


100% funciona de maneira diferente para largura e altura.

Quando você especifica width: 100% , significa "ocupa 100% da largura disponível do elemento pai ou da largura da janela".

Quando você especifica height: 100% , significa apenas "ocupar 100% da altura disponível do elemento pai". O que isso significa é que, se você não especificar uma altura em um elemento de nível superior, a altura de todos os filhos será 0 ou a altura do pai, e é por isso que você precisa definir o elemento mais alto para ter um valor min-height da min-height da janela.

Eu sempre especifico o corpo para ter uma altura mínima de 100vh e facilitar o posicionamento e os cálculos,

body {
  min-height: 100vh;
}




height