Fazer <body> preencher a tela inteira?

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, body {
    margin: 0;
    height: 100%;
}

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.

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

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

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

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

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.

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

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

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

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

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

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

(2018 - testado com Chrome 69 e IE 11)

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>