html title attribute
Hacer<cuerpo> llenar toda la pantalla? (6)
Como ninguna de las otras respuestas funcionó para mí, decidí publicar esto como una respuesta para los demás que buscan una solución que también encontró el mismo problema. Tanto el html como el cuerpo debían configurarse con min-height o el degradado no llenaba la altura del cuerpo.
Encontré el comment 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;
}
Cuando tengo la altura html (o html y body) establecida en 100%,
html {
height: 100%;
margin: 0;
}
body {
min-height: 100%;
margin: 0;
}
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, se corta el degradado. ¿Cómo puedo hacer que el elemento <body> llene toda la página, siempre?
Creo que la forma correcta en gran medida es establecer css a esto:
html
{
overflow: hidden;
}
body
{
margin: 0;
box-sizing: border-box;
}
html, body
{
height: 100%;
}
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 los que los resultados de AJAX llenaron la página y casos en los que no se obtendrían resultados. 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%;
}
height para el html y min-height para el body .
Intenta 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 los márgenes horizontales, los rellenos y los bordes en el cuerpo y restelos del valor de altura mínima.
He tenido resultados extraños al usar unidades vh, vm en elementos dentro del cuerpo, especialmente al cambiar el tamaño.
Tuve que aplicar el 100% a html y cuerpo.
html, body {
margin: 0;
height: 100%;
}