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-