2140

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

O lado direito divestá cinza background-colore eu preciso que ele se expanda verticalmente, dependendo da altura da janela do navegador do usuário. Neste momento, background-colortermina no último conteúdo div.

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

html css height Mike
fonte

7

Que você

possa

Bom caminho a percorrer, mas unidades vh, vw etc são conhecidas por serem de buggy. Existe esta alternativa js leve, se você precisar: joaocunha.github.io/vunit

see

Aqui está uma simples e clara explicação do CSS heightpropriedade com valores percentuais: stackoverflow.com/a/31728799/3597276

Michael Benjamin

4

você pode usar altura: 100vh; css property

Vishnu Chauhan

2833

Existem algumas unidades de medida CSS 3 chamadas:

Comprimentos de porcentagem de viewport (ou relativos à viewport)

O que são comprimentos de porcentagem de viewport?

A partir da recomendação de candidato W3 vinculada acima:

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

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

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

Para esta pergunta, podemos usar vh: 1vhé igual a 1% da altura da janela de visualização. Ou seja, 100vhé igual à altura da janela do navegador, independentemente de onde o elemento esteja situado na árvore DOM:

HTML

<div></div>

CSS

div {
    height: 100vh;
}

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

Quais navegadores suportam essas novas unidades?

Atualmente, isso é suportado em todos os principais navegadores atualizados, além do Opera Mini. Confira Posso usar ... para obter mais suporte.

Como isso pode ser usado com várias colunas?

No caso da pergunta em questão, apresentando um divisor esquerdo e um direito, aqui está um exemplo do JSFiddle mostrando um layout de duas colunas envolvendo ambos vhe vw.

Qual é a `100vh`diferença `100%`?

Veja este layout, por exemplo:

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

A ptag aqui é definida como 100% de altura, mas como a sua contém div200 pixels de altura, 100% de 200 pixels se tornam 200 pixels, e não 100% da bodyaltura. Em 100vhvez disso, usar significa que a ptag terá 100% de altura bodyindependentemente da divaltura. Dê uma olhada neste JSFiddle que o acompanha para ver facilmente a diferença!

James Donnelly
fonte

35

Comportamento estranho ao rolar quando o elemento é realmente mais alto que a janela de exibição. O contêiner mantém a altura da janela de exibição e o conteúdo flui para fora do contêiner. min-height:100vhparece contornar isso.

Wdm

8

@DGDD funciona em iOS Safari 6+, Android Browser 4.4+, BlackBerry Browser 10.0 e IEMobile 10.0. Não sei a qual navegador móvel você está se referindo, mas esses 4 representam mais de 90% dos navegadores móveis usados. Esta pergunta não especifica um requisito para trabalhar em navegadores móveis.

22826 James Donnelly

1

@ robross0606 novamente, essa não é a pergunta que respondi aqui. Essa é uma questão completamente diferente, cuja resposta faz de fato uso flexbox: stackoverflow.com/questions/90178/...

James Donnelly

1

@JamesDonnelly Sim, eu sei. Mas essa não é a resposta para esta pergunta. A altura da janela do navegador inclui a altura da barra de navegação. Isso seria melhor, porque em navegadores móveis, a altura da janela de exibição muda toda vez que a barra de navegação mostra / oculta.

RedClover

3

Alerta para celular: usando o vh mess com o Chrome mobile, que não leva em conta a barra de navegação. Em seguida, ele cobre a parte superior da sua página. Um problema sério, se você tem um menu lá ...

Offirmo

568

Se você deseja definir a altura de um <div>ou de qualquer elemento, também deve definir a altura de <body>e <html>para 100%. Então você pode definir a altura do elemento com 100% :)

Aqui está um exemplo:

body, html {
  height: 100%;
}

#right {
  height: 100%;
}

Ariona Rian
fonte

109

Corrija-me se eu estiver errado, mas acho que você também precisa definir a altura a todos os pais do div, para realmente trabalho

Dany Y

Isso não funcionará se eu estiver usando o design contínuo: altura da página 6000px, com blocos representando as páginas. Quero que um bloco seja exatamente a altura da janela de exibição.

Qwerty

@ DanyY, você está certo. Você precisa definir a altura para todos os pais da div, com as implicações de tudo ter a altura da tela. Aqui está um exemplo .

Toto_tico

Esse truque funciona para alguns casos, mas também não para alguns. Se você procurar compatibilidade ou a maneira mais recomendada, poderá ver a resposta de @ James acima :) Usando o método de porcentagem de viewport :), Isso também deve funcionar. vivas

Ariona Rian

8

@ Qwerty, aqui está a solução. Set CSS assim: html { height: 100%*number of blocks; }, body { height: 100%;}, #div { height: 100%/number of blocks; }. Então se você tem 3 seções, seráhtml { height: 300%; } body { height: 100%; } #div { height: 33.3% }

cameronjonesweb

283

Se você conseguir posicionar absolutamente seus elementos,

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

faria isso.

Tinister
fonte

16

Isso funciona retirando o elemento do fluxo do documento e cimentando seu valor inferior à altura do pai. Isso não é ideal quando o conteúdo excede a altura do pai.

Ricky Boyce

1

Isso não funciona, quando um de seus pais está definido position:relativee sua altura não é 100% da janela de visualização. Ele ajustará a parte superior e inferior do próximo ancestral relativo ou absoluto.

Seika85

141

Você pode usar a unidade view-port em CSS:

HTML:

<div id="my-div">Hello World!</div>

CSS:

#my-div {
    height: 100vh; /* vh stands for view-port height, 1vh is 1% of screen height */
}

MrGeek
fonte

1

@ Lamar Você deve usar * { box-sizing: border-box; }para impedir que isso aconteça.

precisa saber é o seguinte

2

Caniuse verificação Worth para suporte ao navegador em unidades janela de visualização: caniuse.com/#feat=viewport-units

Dave Everitt

133

Você pode usar vhneste caso, que é relativo a 1% da altura da janela de visualização ...

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

Olhe a imagem abaixo 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>

Expandir snippet

Alireza
fonte

Ao dar 100vh, foi adicionado um rolo vertical para a página; portanto, seguiu-se este, mas não funcionou. stackoverflow.com/questions/44645465/… . Existe alguma maneira de evitar a rolagem vertical e a div tocar o fundo sem nenhum conteúdo?

DILEEP THOMAS

@DILEEPTHOMAS procurar existentepaddings/margins

Legends

@Legends no arquivo de raiz i tentou dando como * {margin: 0, padding: 0} mas não tivemos trabalhou

Dileep THOMAS

1

@DILEEPTHOMAS dê uma olhada neste exemplo aqui fornecido por Alireza, ele também tem uma barra de rolagem porque o elemento body tem uma margem. Se você remover a margem, a barra de rolagem desapareceu. Pode ter causas diferentes, mas eu gostaria de fazer o checkout primeiro.

Legends

102

Todas as outras soluções, incluindo a mais votada, vhficam abaixo do ideal quando comparadas ao modelo flexível solução de .

Com o advento do modelo flexível de CSS , resolver o problema de 100% de altura se torna muito, muito fácil: use height: 100%; display: flexno pai eflex: 1 filho. Eles ocupam automaticamente todo o espaço disponível em seu contêiner.

Observe como são simples a marcação e o CSS. Sem hacks de mesa 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>

Expandir snippet

Saiba mais sobre o modelo flexível aqui.

Airen
fonte

3

uma palavra de aviso: quando o conteúdo de um dos contêineres esquerdo / direito exceder a altura do corpo original, o contêiner oposto não será redimensionado; portanto, os contêineres terão alturas diferentes.

amigos estão dizendo sobre schellmax

1

Exemplo do problema que Schellmax aponta: jsfiddle.net/Arete/b4g0o3pq

Arete

Dependendo do design, é overflow-y: auto;possível evitar que "os recipientes excedam a altura do corpo original".

Evi Song

54

Você não menciona alguns detalhes importantes, como:

O layout é de largura fixa?
Uma ou ambas as colunas têm largura fixa?

Aqui está uma possibilidade:

body,
div {
  margin: 0;
  border: 0 none;
  padding: 0;
}

html,
body,
#wrapper,
#left,
#right {
  height: 100%;
  min-height: 100%;
}

#wrapper {
  margin: 0 auto;
  overflow: hidden;
  width: 960px; // width optional
}

#left {
  background: yellow;
  float: left;
  width: 360px; // width optional but recommended 
}

#right {
  background: grey;
  margin-left: 360px; // must agree with previous width 
}

<html>
<head>
  <title>Example</title>
</head>

<body>
  <div id="wrapper">
    <div id="left">
      Left
    </div>

    <div id="right"></div>
  </div>
</body>

</html>

Expandir snippet

Existem muitas variações, dependendo de quais colunas precisam ser corrigidas e quais são líquidas. Você também pode fazer isso com posicionamento absoluto, mas geralmente encontrei melhores resultados (principalmente em termos de navegador cruzado) usando flutuadores.

cleto
fonte

34

Isto é o que funcionou para mim:

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

Expandir snippet

Use em position:fixedvez de position:absolute, dessa forma, mesmo se você rolar para baixo, a divisão será expandida até o final da tela.

Majda
fonte

Esse código com a "posição: [fixo | absoluto]" é ótimo para os fundos de pop-ups (como quando você clica para ampliar uma imagem), mas não tem tanta certeza nos casos em que você realmente precisa rolar para baixo. Massa ainda útil!

Mannyfatboy

29

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

No 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 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 janela de visualização #your-objectse o navegador não suportar vh-units:

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

Jonas Sandstedt
fonte

24

100% funciona de maneira diferente para largura e altura.

Quando você especifica width: 100%, significa "ocupar 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". Isso significa que, se você não especificar uma altura em um elemento de nível superior, a altura de todos os filhos será uma 0ou a altura do pai, e é por isso que você precisa definir o elemento superior para ter uma min-heightaltura da janela.

Eu sempre especifico que o corpo tem uma altura mínima de 100vh e facilita o posicionamento e os cálculos,

body {
  min-height: 100vh;
}

Dinesh Pandiyan
fonte

16

Adicione min-height: 100%e não especifique uma altura (ou coloque-a no modo automático). Ele fez o trabalho totalmente para mim:

.container{     
    margin: auto;
    background-color: #909090;
    width: 60%;
    padding: none;
    min-height: 100%;
}

Remus Simion
fonte

16

100vw === 100% da largura da viewport.

100vh === 100% da altura da viewport.

Se você deseja definir o div largura ou a altura 100% do tamanho da janela do navegador, use:

Para largura: 100vw

Para altura: 100vh

Ou se você deseja definir um tamanho menor, use a calcfunção CSS . Exemplo:

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

Руслан
fonte

12

Existem vários métodos disponíveis para definir a altura de <div>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>

Expandir snippet

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>

Expandir snippet

Método (c) usando caixa flexível:

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>

Expandir snippet

Santosh Khalse
fonte

12

Isso funcionou para mim:

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

#wrapper {
    min-height: 100%; /* Minimum height for a modern browser */
    height:auto !important; /* Important rule for a modern browser */
    height:100%; /* Minimum height for Internet Explorer */
    overflow: hidden !important; /* Firefox scroll-bar */
}

Retirado desta página .

teste
fonte

12

A maneira mais simples é fazer assim.

div {
background: red;
height: 100vh;
}
body {
margin: 0px;
}

<div></div>

Expandir snippet

EMILO
fonte

11

Tentar definir height:100%em html&body

html, 
body {
    height: 100%;
}

E se você quiser 2 div height same use ou defina a display:flexpropriedade do elemento pai .

Mohammed Javed
fonte

9

Mesmo com todas as respostas aqui, fiquei surpreso ao descobrir que ninguém realmente resolveu o problema. Se eu usei 100vh height/ min-height, o layout foi interrompido quando o conteúdo era maior que uma página. Se eu usasse 100% height/min-height , o layout foi interrompido quando o conteúdo era menor que a altura da página.

A solução que encontrei, que resolveu os dois casos, foi combinar as duas principais respostas:

html, body, #mydiv {
  height: 100%;
  min-height: 100vh;
}

machineghost
fonte

1

Eu tenho uma barra de navegação fixa de 90px de altura, então só precisei alterar seu "100vh" para "calc (100vh - 90px)"

Mark Jackson

8

Basta usar a unidade "vh" em vez de "px", o que significa altura da porta de visualização.

height: 100vh;

khalifeh
fonte

7

Os elementos de bloco consomem toda a largura do pai, por padrão.

É assim que eles atendem aos requisitos de design, que devem ser empilhados verticalmente.

9.4.1 Contextos de formatação de bloco

Em um contexto de formatação de bloco, as caixas são dispostas uma após a outra, verticalmente, começando na parte superior de um bloco contendo.

Esse comportamento, no entanto, não se estende à altura.

Por padrão, a maioria dos elementos tem a altura de seu conteúdo (height: auto ).

Ao contrário da largura, você precisa especificar uma altura se desejar espaço extra.

Portanto, lembre-se destas duas coisas:

a menos que você queira largura total, você precisa definir a largura de um elemento de bloco
a menos que você queira a altura do conteúdo, você precisa definir a altura de um elemento

.Contact {
  display: flex;     /* full width by default */
  min-height: 100vh; /* use full height of viewport, at a minimum */
}

.left {
  flex: 0 0 60%;
  background-color: tomato;
}

.right {
  flex: 1;
  background-color: pink;
}

body { margin: 0; } /* remove default margins */

<div class="Contact">
  <section class="left">
    <div class="">
      <h1>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</h1>
    </div>
  </section>
  <section class="right">
    <img />
  </section>
</div>

Expandir snippet

Michael Benjamin
fonte

7

Aqui está algo que não é exatamente como o que você tinha nas respostas anteriores, mas pode 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/

newdark-it
fonte

6

Use CSS FlexBox

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

robross0606
fonte

6

Uma das opções está usando a tabela CSS. Possui excelente suporte ao navegador e funciona até no Internet Explorer 8.

Exemplo 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>

Expandir snippet

Adesivos
fonte

6

Tente isto - testado:

body {
  min-height: 100%;
}

#right, #left {
  height: 100%;
}

Edição: atualização 2020:

Você pode usar vhagora:

#right, #left {
  height: 100vh
}

lukaszkups
fonte

5

Você pode usar display: flexeheight: 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>

Expandir snippet

Thuc Nguyen
fonte

Já existem várias soluções flexbox postadas, incluindo uma com essa implementação exata postada apenas 26 dias antes desta resposta.

precisa saber é o seguinte

5

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

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

Fonte

Prabhakar Undurthi
fonte

3

Solução desatualizada. Use em vhvez disso.

avalanche1

1

Não use vhse você planeja usar o design responsivo em dispositivos móveis.

Alexander Kim

5

Experimente o seguinte CSS:

html {
    min-height: 100%;
    margin: 0;
    padding: 0;
}

body {
    height: 100%;
}

#right {
    min-height: 100%;
}

ProblemChild
fonte

5

Na verdade, o que funcionou melhor para mim foi usar a vhpropriedade.

No meu aplicativo React, eu queria que o div correspondesse à página alta mesmo quando redimensionado. Eu tentei height: 100%;, overflow-y: auto;mas nenhum deles funcionou ao configurá- height:(your percent)vh;lo como pretendido.

Nota: se você estiver usando preenchimento, cantos arredondados, etc., certifique-se de subtrair esses valores da vhporcentagem da sua propriedade, ou adicione uma altura extra e faça aparecer as barras de rolagem. 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);
}

JimmyFlash
fonte

A propósito, você menciona 'cantos arredondados' que afetam a altura do seu elemento, espero que a configuração box-sizing: border-box;supere isso, significa que o tamanho da borda também é levado em consideração ao calcular o tamanho (largura e altura) do elemento.

Neek

5

Experimente uma vez ...

*{
  padding:0;
  margin:0;
}
.parent_div{
  overflow:hidden;
  clear:both;
  color:#fff;
  text-align:center;
}

.left_div {
  float: left;
  height: 100vh;
  width: 50%;
  background-color: blue;

}

.right_div {
  float: right;
  height: 100vh;
  width: 50%;
  background-color: green;

}

<div class=" parent_div">
  <div class="left_div">Left</div>
  <div class="right_div">Right</div>
</div>

Expandir snippet

Sunil Rajput
fonte

3

Se você usa o position: absolute;jQuery, pode usar

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

John Smith Opcional
fonte

1

Não há necessidade de JavaScript. A solução moderna é usar o modelo de caixa flexível CSS .

Dan Dascalescu

Se você estiver usando JS, achei isso bastante útil. NOTA: é melhor usar isso com $ (window) .load (), pois você obterá resultados diferentes sendo retornados usando F5 ou CTRL + F5. Verifique este link para mais informações. stackoverflow.com/questions/13314058/…

edward

2

HTML

   // vw: hundredths of the viewport width.
   // vh: hundredths of the viewport height.
   // vmin: hundredths of whichever is smaller, the viewport width or height.
   // vmax: hundredths of whichever is larger, the viewport width or height.

<div class="wrapper">
    <div class="left">
        Left
    </div>
    <div class="right">
        Right
    </div>
</div>

CSS

<style>
    .wrapper {
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        height: 100vh; // Height window (vh)
    }
    .wrapper .left{
        widht: 80%; // Width optional, but recommended
    }
    .wrapper .right{
        widht: 20%; // Width optional, but recommended
        background-color: #dd1f26;
    }
<style>

RamNiwas Sharma
fonte

1

Possível erro de ortografia: widht(perto do final)

Peter Mortensen

Como criar uma div 100% de altura da janela do navegador

Respostas:

Comprimentos de porcentagem de viewport (ou relativos à viewport)

O que são comprimentos de porcentagem de viewport?

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

HTML

CSS

Quais navegadores suportam essas novas unidades?

Como isso pode ser usado com várias colunas?

Qual é a `100vh`diferença `100%`?

HTML

CSS

Como criar uma div 100% de altura da janela do navegador

Respostas:

Comprimentos de porcentagem de viewport (ou relativos à viewport)

O que são comprimentos de porcentagem de viewport?

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

HTML

CSS

Quais navegadores suportam essas novas unidades?

Como isso pode ser usado com várias colunas?

Qual é a 100vhdiferença 100%?

HTML

CSS

Qual é a `100vh`diferença `100%`?