Faça com que o corpo tenha 100% da altura do navegador


845

Eu quero fazer com que o corpo tenha 100% da altura do navegador. Posso fazer isso usando CSS?

Eu tentei configurar height: 100%, mas não funciona.

Quero definir uma cor de plano de fundo para que uma página preencha toda a janela do navegador, mas se a página tiver pouco conteúdo, recebo uma barra branca feia na parte inferior.


Respostas:


1092

Tente definir a altura do elemento html para 100% também.

html, 
body {
    height: 100%;
}

O corpo procura em seu pai (HTML) como dimensionar a propriedade dinâmica; portanto, o elemento HTML também precisa ter sua altura definida.

No entanto, o conteúdo do corpo provavelmente precisará mudar dinamicamente. Definir altura mínima para 100% alcançará esse objetivo.

html {
  height: 100%;
}
body {
  min-height: 100%;
}

6
obrigado, isso parece remover a barra branca em páginas curtas, mas agora em páginas cuja altura excede a altura da janela do navegador, recebo uma barra branca de 20 px na parte inferior: |
11116 bodyofheat

48
ok eu descobri! funciona se eu adicionar html, body {min-height: 100%;}: D
bodyofheat 11/11/11

12
Nota: se você usar a body {min-height}versão, não poderá usar o .body-child{height: 100%}truque.
Salman A

14
melhor resposta é com CSS3, usando vh-> body { height: 100vh }- resposta de verificação aqui stackoverflow.com/a/25829844/2680216
Adriano Resende

2
@ bFunc Eu tenho esse problema de cromo para. html {height: 100%;} body {height: auto} faz o trabalho.
precisa saber é

217

Como alternativa para definir as alturas do elemento htmle , você também pode usar comprimentos de porcentagem da porta de visualização.body100%

5.1.2 Comprimentos de porcentagem de viewport: as unidades 'vw', 'vh', 'vmin', 'vmax'

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.

Nesse caso, você pode usar o valor 100vh- que é a altura da janela atual.

Exemplo Aqui

body {
  height: 100vh;
  padding: 0;
}
body {
  min-height: 100vh;
  padding: 0;
}

Isso é suportado na maioria dos navegadores modernos - o suporte pode ser encontrado aqui .


4
Além do simples fato, é bom que adotemos novas práticas.
Pan Wangperawong

3
@ Niaster Eu definitivamente concordo. Suporte ao navegador já melhorou desde que eu postei esta resposta também :)
Josh Crozier

1
@ encarnado Sim .. pena que não seja :) Parece que a última vez que o OP esteve online foi em 11/11/11 (a data em que a pergunta foi feita ..) Então, duvido que isso mude.
Josh Crozier 07/07

18
Não sei por que precisamos começar a "adotar novas práticas" quando a antiga prática funciona bem. Não há vantagem em fazer isso: o código não é menor, nem tem um desempenho melhor, e ainda existem navegadores por aí que não suportam vw / vh.
Cimmanon

3
A folha de estilo do agente do usuário do Chrome adiciona uma margem de 8px ao corpo por padrão (não tenho certeza sobre outros navegadores), então eu tive que adicionar também margin: 0;para evitar uma barra de rolagem vertical persistente à direita.
Andy Raddatz

121

Se você tiver uma imagem de plano de fundo, convém definir isso:

html{
  height: 100%;
}
body {
  min-height: 100%;
}

Isso garante que sua tag body possa continuar crescendo quando o conteúdo for mais alto que a viewport e que a imagem de plano de fundo continue repetindo / rolar / o que for quando você começar a rolar para baixo.

Lembre-se, se você precisar dar suporte ao IE6, precisará encontrar uma maneira de se envolver com o height:100%corpo, heightcomo o IE6 trata min-height.


Também funciona quando há uma flexbox mundial bem debaixo do corpo (body> # flexbox-wrapper)
justnorris

2
Essa é a resposta correta, pois a resposta aceita não aumenta à medida que o conteúdo fica mais longo que uma única tela.
SimplGy

Muito obrigado, Dan irritado, que o espaço em branco feio na parte inferior do meu site se foi!
Boris Burkov

Obviamente, desde que essa pergunta foi feita, as dimensões baseadas em porta de exibição se tornaram uma coisa. Então agora você pode simplesmente fazerbody{min-height: 100vh}
Angry Dan

Você também precisa body { height: auto; }que as barras de rolagem não sejam mostradas no FireFox. Fora isso, funciona perfeitamente.
Torxed 27/01

82

Se você deseja manter as margens no corpo e não deseja barras de rolagem, use o seguinte css:

html { height:100%; }
body { position:absolute; top:0; bottom:0; right:0; left:0; }

A configuração body {min-height:100%} fornecerá barras de rolagem.

Veja a demonstração em http://jsbin.com/aCaDahEK/2/edit?html,output .


7
Obrigado pela resposta só trabalhando :) eu assumo 'absoluto' fez o trabalho
Dmitry Matveev

Funciona bem para mim no Firefox sem barras de rolagem, obrigado. A resposta aceita não.
Andrew

@ Andrew Curiosamente, isso fornece barras de rolagem no FireFox. O que você precisa, no entanto, para a resposta aceita está height: auto;na bodycláusula e também para que as barras de rolagem sejam exibidas agora.
Torxed

@ Torxed Eu ainda recebo barras de rolagem no FireFox com isso também. Adicionar a configuração automática à altura não pareceu funcionar para mim :(
Travis Crum

Isso não funcionou para mim no Chrome 56.0.2924.87 (64 bits).
21717 Ryan


24

Depois de testar vários cenários, acredito que esta é a melhor solução:

html {
    width: 100%;
    height: 100%;
    display: table;
}

body {
    width: 100%;
    display: table-cell;
}

html, body {
    margin: 0px;
    padding: 0px;
}

É dinâmico em que as htmle os bodyelementos irá expandir automaticamente se o seu conteúdo estouro. Testei isso na versão mais recente do Firefox, Chrome e IE 11.

Veja o violino completo aqui (para seus inimigos de mesa por aí, você sempre pode alterá-lo para usar uma div):

https://jsfiddle.net/71yp4rh1/9/


Com isso dito, há vários problemas com as respostas postadas aqui .

html, body {
    height: 100%;
}

O uso do CSS acima fará com que o html e o elemento body NÃO se expandam automaticamente se o conteúdo exceder, como mostrado aqui:

https://jsfiddle.net/9vyy620m/4/

Ao rolar, observe o fundo repetitivo? Isso está acontecendo porque a altura do elemento do corpo NÃO aumentou devido ao transbordamento da tabela filho. Por que não se expande como qualquer outro elemento de bloco? Não tenho certeza. Eu acho que os navegadores lidam com isso incorretamente.

html {
    height: 100%;
}

body {
    min-height: 100%;
}

Definir uma altura mínima de 100% no corpo, como mostrado acima, causa outros problemas. Se você fizer isso, não poderá especificar que uma div ou tabela filha ocupe uma altura percentual, conforme mostrado aqui:

https://jsfiddle.net/aq74v2v7/4/

Espero que isso ajude alguém. Eu acho que os navegadores estão lidando com isso incorretamente. Eu esperaria que a altura do corpo se ajustasse automaticamente a crescer cada vez mais se seus filhos transbordassem. No entanto, isso não parece acontecer quando você usa 100% de altura e 100% de largura.


3
Tentei todas as respostas mais votadas nesta página, mas nenhuma funcionou. Este fez!
Ryan

Esta resposta deve ser a aceita. A height: 100vhnão é uma solução também. Definir o contêiner superior como 100vhalto e 100vwpode causar problemas se o contêiner tiver barras de rolagem - ele será maior do que deveria (e poderá fazer com que as barras de rolagem fiquem visíveis desnecessariamente). Os height: 100vhproblemas também causados por nós na mais recentes dispositivos Android (por exemplo Xiaomi Mi 9 com Android 9), onde o contentor seria maior do que a própria tela, e faria barra de rolagem vertical desnecessária para o corpo do documento.
jtompl 03/04

21

O que eu uso no início de literalmente todos os arquivos CSS que uso é o seguinte:

html, body{
    margin: 0;

    padding: 0;

    min-width: 100%;
    width: 100%;
    max-width: 100%;

    min-height: 100%;
    height: 100%;
    max-height: 100%;
}

A margem de 0 garante que os elementos HTML e BODY não estejam sendo posicionados automaticamente pelo navegador para ter algum espaço à esquerda ou à direita deles.

O preenchimento de 0 garante que os elementos HTML e BODY não estejam empurrando automaticamente tudo dentro deles para baixo ou para a direita devido aos padrões do navegador.

As variantes de largura e altura são definidas como 100% para garantir que o navegador não as redimensione, na expectativa de ter uma margem ou preenchimento de configuração automática, com min e max definidos apenas no caso de acontecer algo estranho e inexplicável, embora você provavelmente não precisa deles.

Esta solução também significa que, como eu fiz quando eu comecei em HTML e CSS há vários anos, você não tem que dar seu primeiro <div>a margin:-8px;fazê-lo caber no canto da janela do navegador.


Antes de postar, olhei para meu outro projeto de CSS em tela cheia e descobri que tudo o que eu havia usado era apenas body{margin:0;}nada e mais, que funcionou bem nos dois anos em que trabalhei nele.

Espero que esta resposta detalhada ajude, e sinto sua dor. A meu ver, é estúpido que os navegadores definam um limite invisível no lado esquerdo e, às vezes, no lado superior dos elementos body / html.


Você poderia explicar por favor, qual é o possível objetivo dos width: 100%elementos body e html? Sim, eu entendo que, do ponto de vista prático, body { margin: 0; }deve ser suficiente na maioria dos casos. Eu só quero entender melhor.
precisa saber é

21

Uma atualização rápida

html, body{
    min-height:100%;
    overflow:auto;
}

Uma solução melhor com o CSS atual

html, body{ 
  min-height: 100vh;
  overflow: auto;
}

2
Como isso oferece algo diferente sobre as respostas existentes?
Cimmanon

3
Eu tentei outros também, mas não funcionou para mim. Este funcionou, então pode ser uma solução para alguém carente. @cimmanon
Jayant Varshney

Devo dizer que este funciona para mim, exceto outras respostas de alto voto. overflow: autoaqui faz a mágica. Btw eu uso o Chrome.
SkuraZZ 15/1018

Única opção (eu encontrei) que permite que o conteúdo excedente redimensione a altura.
Daniel Sharp

6

Aqui:

html,body{
    height:100%;
}

body{
  margin:0;
  padding:0
  background:blue;
}

4

Você também pode usar JS, se necessário

var winHeight = window.innerHeight    || 
document.documentElement.clientHeight || 
document.body.clientHeight;

var pageHeight = $('body').height();
if (pageHeight < winHeight) {
    $('.main-content,').css('min-height',winHeight)
}

Mas para isso, você precisa adicionar mais coisas do que o necessário, como a biblioteca jQuery e escrever em JavaScript, enquanto isso pode ser feito em CSS.
Front-End Developer

3

Tentar

<html style="width:100%; height:100%; margin: 0; padding: 0;">
<body style="overflow:hidden; width:100%; height:100%; margin:0; padding:0;">

2
Você poderia explicar por favor, qual é o possível objetivo dos width: 100%elementos body e html? Sim, eu entendo que, do ponto de vista prático, body { margin: 0; }deve ser suficiente na maioria dos casos. Eu só quero entender melhor.
precisa saber é

3

Por favor, checar isto:

* {margin: 0; padding: 0;}    
html, body { width: 100%; height: 100%;}

Ou tente o novo método Altura da janela de visualização:

html, body { width: 100vw; height: 100vh;}

Janela de visualização: se o uso da janela de visualização significa que o tamanho do conteúdo da tela chegará à altura máxima da tela.


Inclua uma explicação da sua solução para que outras pessoas que encontrarem essa resposta possam entender. Obrigado!
Shawn

Você poderia explicar por favor, qual é o possível objetivo dos width: 100%elementos body e html?
john cj

Então, digamos que eu tenho uma tabela com 50 colunas e 1000 linhas com números entre 1000 a 9999, o que vai acontecer com eles, eles vão rolar além da janela, como fazemos normalmente, ou será que eles têm um tipo de estouro de barra de rolagem
PirateApp

3

Se você não deseja editar o seu próprio arquivo CSS e definir as regras de altura por conta própria, as estruturas CSS mais comuns também resolvem esse problema com o elemento body preenchendo a totalidade da página, entre outros problemas, à vontade com vários tamanhos de viewports.

Por exemplo, a estrutura CSS tácita resolve esse problema imediatamente, onde você não precisa definir nenhuma regra e classe CSS e apenas inclui o arquivo CSS em seu HTML.


2
html {
    background: url(images/bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    min-height: 100%;
}
html body {
    min-height: 100%
}

Funciona para todos os principais navegadores: FF, Chrome, Opera, IE9 +. Funciona com imagens e gradientes de fundo. As barras de rolagem estão disponíveis conforme a necessidade do conteúdo.


2

Eu usaria isso

html, body{
      background: #E73;
      min-height: 100%;
      min-height: 100vh;
      overflow: auto; // <- this is needed when you resize the screen
    }
<html>
    <body>
    </body>
</html>

O navegador usará min-height: 100vhe, de alguma forma, o navegador for um pouco mais antigo min-height: 100%, será o substituto.

A overflow: autoé necessário se você quiser que o corpo e html para expandir a sua altura quando redimensionar o ecrã (para um tamanho celular, por exemplo)



1

todas as respostas são 100% corretas e bem explicadas, mas fiz algo bom e muito simples para torná-lo responsivo.

aqui, o elemento terá 100% da porta de altura de visualização, mas quando se trata da visualização móvel, não fica bem, especialmente na visualização em retrato (móvel); portanto, quando a porta de visualização está diminuindo, o elemento entra em colapso e se sobrepõe. então, para torná-lo pouco responsivo, aqui está o código. espero que alguém obtenha ajuda com isso.

<style>
.img_wrap{
      width:100%;
      background: #777;
}
.img_wrap img{
      display: block;  
      width: 100px;
      height: 100px;
      padding: 50px 0px;
      margin: 0 auto;
}
.img_wrap img:nth-child(2){
      padding-top: 0;
}
</style>

<div class="img_wrap">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
  <img src="https://i.pinimg.com/originals/71/84/fc/7184fc63db0516a00e7d86900d957925.jpg" alt="">
</div>

<script>
   var windowHeight = $(window).height();
   var elementHeight = $('.img_wrap').height();

   if( elementHeight > windowHeight ){
       $('.img_wrap').css({height:elementHeight});
   }else{
       $('.img_wrap').css({height:windowHeight});
   }
</script>

Aqui está a demonstração do JSfiddle.


0

Aqui Atualização

html
  {
    height:100%;
  }

body{
     min-height: 100%;
     position:absolute;
     margin:0;
     padding:0; 
}

-1

Sobre o espaço extra na parte inferior: sua página é um aplicativo ASP.NET? Nesse caso, provavelmente há quase tudo na sua marcação. Não se esqueça de estilizar o formulário também. Adicionar overflow:hidden;ao formulário pode remover o espaço extra na parte inferior.


6
Eu não recomendo o uso de overflow: hidden a menos que você tenha um bom motivo. Descubra por que as coisas estão transbordando e ajustar para que ele não vai transbordar vez
jontro

-1
@media all {
* {
    margin: 0;
    padding: 0;
}

html, body {
    width: 100%;
    height: 100%;
} }

Você poderia explicar por favor, qual é o possível objetivo dos width: 100%elementos body e html? Sim, eu entendo que, do ponto de vista prático, body { margin: 0; }deve ser suficiente na maioria dos casos. Eu só quero entender melhor.
precisa saber é

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.