¿Hacer que <body> llene toda la pantalla?

129

Estoy usando un degradado radial como fondo en mi página web, así:

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

Funciona, pero cuando el contenido no llena toda la página, el gradiente se corta. ¿Cómo puedo hacer que el <body>elemento llene toda la página, siempre?

html css radial-gradients Ry-
fuente

2

¿Y body { width: 100%; height: 100%; }no funciona?

Alex

Ese bit de CSS se aplica a la etiqueta del cuerpo, ¿verdad? Funciona muy bien para mí en Chrome jsfiddle.net/kdjFD/embedded/result actualizado . ¿Qué navegador estás probando?

LeRoy

44

No, body { width: 100%; height: 100%; }no funciona Supongo que también tengo que aplicarlo <html>.

Ry-

No use la antigua sintaxis -webkit-. Use la sintaxis oficial del W3C

Tim Nguyen

@TimNguyen: Esta pregunta se hizo hace tres años, cuando no había compatibilidad con el navegador para eso.

Ry-

201

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

Capdragon
fuente

18

Parece que todo lo que se necesita es en html { height: 100%; }realidad.

Ry-

30

Ni html { height: 100%; }tampoco body { height: 100%; }fue suficiente para mí (Opera incluida como prueba) Lo que funcionó mejor fue html, body { min-height: 100%; }Usar altura en lugar de altura mínima dejó mi fondo blanco sin el color de fondo aplicado cuando expandí algunos divs plegables en el medio de mi página. min-heightarreglado eso.

Stephen P

1

¿Por qué ocurre este problema solo cuando se usa el fondo: gradiente lineal y no con un fondo simple

ASEN

@ASEN ¿Alguna vez descubriste por qué es eso?

encaje

2

Si aún no funciona para cualquier persona acaba de cambiar 100%a 100vh.

Polimorfismo

27

En nuestro sitio tenemos páginas donde el contenido es estático y páginas donde se carga con AJAX. En una página (una página de búsqueda), hubo casos en que los resultados de AJAX llenarían más que la página, y casos en los que no devolvería ningún resultado. Para que la imagen de fondo llene la página en todos los casos, tuvimos que aplicar el siguiente CSS:

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

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

heightpara el htmly min-heightpara el body.

jwatts1980
fuente

1

Ninguno de ellos necesita width: 100%;.

Ry-

1

debido a la exhibición: naturaleza de bloque

Valen

también margin: 0;es suficiente, no es necesario especificar qué unidad usa cero

KameeCoding

15

Como ninguna de las otras respuestas funcionó para mí, decidí publicar esto como una respuesta para otros que buscan una solución que también encontraron el mismo problema. Tanto el html como el cuerpo debían establecerse min-heighto el gradiente no llenaría la altura del cuerpo.

Encontré el comentario de Stephen P para proporcionar la respuesta correcta a esto.

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

altura del cuerpo de relleno de fondo

Cuando tengo la altura html (o html y el cuerpo) establecida en 100%,

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

el fondo no llena el cuerpo

Comunidad
fuente

12

Tuve que aplicar el 100% a html y al cuerpo.

htrufan
fuente

4

Intente usar unidades de medida de viewport (vh, vm) a nivel del cuerpo

html, cuerpo {margen: 0; relleno: 0; } cuerpo {altura mínima: 100vh; }

Use unidades vh para márgenes horizontales, rellenos y bordes en el cuerpo y reste del valor de altura mínima.

He tenido resultados extraños usando unidades vh, vm en elementos dentro del cuerpo, especialmente al redimensionar.

Mike Wright
fuente

1

Creo que la forma más correcta es establecer css para esto:

html
{
    overflow: hidden;
}

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

html, body
{
    height: 100%;
}

Martin Wantke
fuente

Lo importante de esto es lo mismo que la respuesta aceptada hace seis años, lo siento.

Ry-

1

Probé todas las soluciones anteriores y no estoy desacreditando ninguna de ellas, pero en mi caso, no funcionaron.

Para mí, el problema fue causado porque la <header>etiqueta tenía un margin-top5em y <footer>tenía un margen inferior de 5em. Los eliminé y en su lugar puse algunos padding(arriba y abajo, respectivamente). No estoy seguro de si reemplazar el margen fue una solución ideal para el problema, pero el punto es que, si el primer y el último elemento <body>tiene algunos márgenes, es posible que desee examinarlo y eliminarlos.

Mis etiquetas htmly bodytenían los siguientes estilos

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

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

dinika saxena
fuente

1

Si tiene un borde o relleno, entonces la solución

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

Expandir fragmento

produce la representación imperfecta

Para hacerlo bien en presencia de un borde o relleno

utilizar en su lugar

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

Expandir fragmento

como señaló Martin , aunque overflow: hiddenno es necesario.

(2018 - probado con Chrome 69 e IE 11)

Vrokipal
fuente

Su respuesta solo es relevante para usted y porque agregó un borde a la bodyetiqueta. Sin ese borde, bodyllenará exactamente el 100% de la ventana gráfica, puede ver eso con un color de fondo, por ejemplo. La respuesta correcta a esa pregunta fue aceptada hace 7 años y aún es válida.

Niss

-1

Esto funciona para mi:

<!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
fuente

No es cuál era la pregunta, lo siento. Sin embargo, me alegra que hayas encontrado algo que funcione para ti.

Ry-

¿Hacer que <body> llene toda la pantalla?

Respuestas: