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

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.

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%;
}

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 .

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.

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 .

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

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.

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.

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;
}

Aqui:

html,body{
    height:100%;
}

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

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)
}

Tentar

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

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.

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.

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.

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)

Somente com 1 linha de CSS… Você pode fazer isso.

body{ height: 100vh; }

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.

Aqui Atualização

html
  {
    height:100%;
  }

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

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.

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

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

CSS3 tem um novo método.

 height:100vh

Torna o ViewPort 100% igual à altura.

Portanto, seu código deve ser

 body{
 height:100vh; 
 }