Fazer <body> preencher a tela inteira?

129

Estou usando um gradiente radial como plano de fundo na minha página da Web, assim:

background-image: -webkit-gradient(radial, 100% 100%, 10, 90% 90%, 600, from(#ccc), to(#000));

Funciona, mas quando o conteúdo não preenche a página inteira, o gradiente é cortado. Como posso fazer o <body>elemento preencher sempre a página inteira?

html css radial-gradients Ry-
fonte

2

E body { width: 100%; height: 100%; }não funciona?

19411 Alex

Esse bit de css é aplicado à tag body, certo? Ele funciona muito bem para mim no Chrome atualizado jsfiddle.net/kdjFD/embedded/result . Qual navegador você está testando?

LeRoy

4

Não, body { width: 100%; height: 100%; }não funciona. Acho que preciso aplicá-lo <html>também.

Ry-

Não use a sintaxe -webkit- antiga. Use a sintaxe oficial do W3C

Tim Nguyen

@ TimNguyen: Esta pergunta foi feita há três anos, quando não havia suporte para o navegador.

Ry-

201

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

capdragon
fonte

18

Parece que tudo o que html { height: 100%; }precisamos é realmente.

Ry-

30

Nem html { height: 100%; }nem body { height: 100%; }foi o suficiente para mim (Opera incluído como um teste) O que funcionou melhor foi html, body { min-height: 100%; }a partir da altura em vez de min-height deixei meu fundo branco w / o background-color aplicado quando eu expandiu algumas divs recolhíveis no meio da minha página. min-heightconsertou isso.

Stephen P

1

Porque é que este problema acontece somente quando usar fundo: gradiente linear e não com fundo simples

ASEN

@ ASEN Você já descobriu por que isso é?

rendado

2

Se ainda não está funcionando para alguém, basta mudar 100%para 100vh.

PolymorphismPrince

27

Em nosso site, temos páginas em que o conteúdo é estático e páginas em que é carregado com o AJAX. Em uma página (uma página de pesquisa), havia casos em que os resultados do AJAX preenchiam mais do que a página e casos em que não retornavam resultados. Para que a imagem de segundo plano preencha a página em todos os casos, tivemos que aplicar o seguinte CSS:

html {
   margin: 0px;
   height: 100%;
   width: 100%;
}

body {
   margin: 0px;
   min-height: 100%;
   width: 100%;
}

heightpara o htmle min-heightpara o body.

jwatts1980
fonte

1

Nenhum deles precisa width: 100%;.

Ry-

1

por causa da exibição: natureza do bloco

Valen

Também margin: 0;é o suficiente, não há necessidade de especificar qual unidade você usa zero

KameeCoding

15

Como nenhuma das outras respostas funcionou para mim, decidi postar isso como uma resposta para outras pessoas que procuravam uma solução que também encontrasse o mesmo problema. Tanto o html quanto o corpo precisavam ser definidos min-heightou o gradiente não preencheu a altura do corpo.

Encontrei o comentário de Stephen P para fornecer a resposta correta para isso.

html {
    /* To make use of full height of page*/
    min-height: 100%;
    margin: 0;
}
body {
    min-height: 100%;
    margin: 0;
}

altura do corpo de preenchimento do plano de fundo

Quando tenho a altura html (ou html e corpo) definida como 100%,

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

fundo não preenchendo o corpo

Comunidade
fonte

12

Eu tive que aplicar 100% ao html e ao corpo.

htrufan
fonte

4

Tente usar as unidades de medida da janela de visualização (vh, vm) no nível do corpo

html, corpo {margem: 0; estofamento: 0; } corpo {altura mínima: 100vh; }

Use unidades vh para margens horizontais, forros e bordas no corpo e subtraia-as do valor da altura mínima.

Eu tive resultados bizarros usando unidades vh, vm em elementos dentro do corpo, especialmente ao redimensionar.

Mike Wright
fonte

1

Eu acho que a maneira mais correta, é definir css para isso:

html
{
    overflow: hidden;
}

body
{
    margin: 0;
    box-sizing: border-box;
}

html, body
{
    height: 100%;
}

Martin Wantke
fonte

As partes importantes disso são as mesmas da resposta aceita há seis anos, desculpe.

Ry-

1

Eu tentei todas as soluções acima e não estou desacreditando nenhuma delas, mas no meu caso, elas não funcionaram.

Para mim, o problema foi causado porque a <header>tag tinha margin-top5em e a <footer>margem inferior de 5em. Eu os removi e, em vez disso, coloquei alguns padding(superior e inferior, respectivamente). Não tenho certeza se a substituição da margem foi uma correção ideal para o problema, mas o ponto é que, se o primeiro e o último elemento do seu <body>tiver algumas margens, convém analisá-lo e removê-lo.

Minhas tags htmle bodytinham os seguintes estilos

body {
  line-height: 1;
  min-height: 100%;
  position: relative; }

html {
  min-height: 100%;
  background-color: #3c3c3c; }

dinika saxena
fonte

1

Se você tiver uma borda ou estofamento, a solução

html, body {
    margin: 0;
    height: 100%;
}
body {
    border: solid red 5px;
    border-radius: 2em;
}

Expandir snippet

produz a renderização imperfeita

Para acertar na presença de uma borda ou estofamento

use em vez disso

html, body {
    margin: 0;
    height: 100%;
}
body {
    box-sizing: border-box;
    border: solid red 5px;
    border-radius: 2em;
}

Expandir snippet

como Martin apontou, embora overflow: hiddennão seja necessário.

(2018 - testado com Chrome 69 e IE 11)

Vrokipal
fonte

Sua resposta é relevante apenas para você e porque você adicionou uma borda à bodytag. Sem essa borda, o bodypreenchimento será exatamente 100% da janela de visualização, é possível ver isso com uma cor de plano de fundo, por exemplo. A resposta correta para essa pergunta foi aceita há 7 anos ainda é válida.

Niss

-1

Isso funciona para mim:

<!doctype html>
<html>
<head>
  <meta charset="utf-8" />
  <title> Fullscreen Div </title>
  <style>
  .test{
    position: fixed;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    z-index: 10;
  }
  </style>
</head>
<body>
  <div class='test'>Some text</div>
</body>
</html>

GigiProve
fonte

Não qual era a pergunta, desculpe. Ainda bem que você encontrou algo que funciona para você.

Ry-

Fazer <body> preencher a tela inteira?

Respostas: