html - content - Ajuste la altura 100% en div absoluta
iframe height content (6)
Estoy enfrentando un problema con la superposición de una división de 100% de altura . Podría usar la posición fija para resolver la portada, pero eso no es realmente lo que quiero porque debería poder desplazarse hacia abajo en la ''portada''> para que las personas con resoluciones más bajas que la mía puedan ver todo el contenido.
Ejemplo de código:
HTML
<body>
<div>Overlay example text</div>
</body>
CSS
body {
float: left;
height: 3000px;
width: 100%;
}
body div {
position: absolute;
height: 100%;
width: 100%;
background-color: yellow;
}
El problema: la altura del div 100% solo contiene el 100% del navegador / visor web, pero quiero que cubra todo el cuerpo.
Gracias por adelantado :)
Estiramiento completo (horizontal / vertical)
La respuesta aceptada es genial. Solo quiero señalar algunas cosas para otros que vienen aquí. Los márgenes no son necesarios en estos casos. Si quiere un diseño centrado con un "Margen" específico, puede agregarlos a la derecha e izquierda, así:
.stretched {
position: absolute;
right: 50px; top: 0; bottom: 0; left: 50px;
margin: auto;
}
Esto es extremadamente útil.
Centrado div (vertical / horizontal)
Como beneficio adicional, el centrado absoluto se puede utilizar para obtener un centrado extremadamente simple:
.centered {
height: 100px; width: 100px;
right: 0; top: 0; bottom: 0; left: 0;
margin: auto;
position: absolute;
}
En lugar de usar el body , html funcionó para mí:
html {
min-height:100%;
position: relative;
}
div {
position: absolute;
top: 0px;
bottom: 0px;
right: 0px;
left: 0px;
}
Otra solución sin usar ninguna altura, pero todavía llena el 100% de la altura disponible. Compruebe esto, por ejemplo, en el codepen. http://codepen.io/gauravshankar/pen/PqoLLZ
Para este html y cuerpo debe tener 100% de altura. Esta altura es igual a la altura de la ventana gráfica.
Haga que la posición interna de div sea absoluta y proporcione la parte superior e inferior 0. Esto llena la división a la altura disponible. (altura igual al cuerpo.)
código HTML:
<head></head>
<body>
<div></div>
</body>
</html>
código css:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%;
position: relative;
}
html {
background-color: red;
}
body {
background-color: green;
}
body> div {
position: absolute;
background-color: teal;
width: 300px;
top: 0;
bottom: 0;
}
Pocas respuestas han dado una solución con altura y anchura del 100%, pero te recomiendo que no utilices el porcentaje en css, usa la posición superior / inferior e izquierda / derecha.
Este es un mejor enfoque que le permite controlar el margen.
Aquí está el código:
body {
position: relative;
height: 3000px;
}
body div {
top:0px;
bottom: 0px;
right: 0px;
left:0px;
background-color: yellow;
position: absolute;
}
intenta agregar
position:relative
a tus estilos corporales. Siempre que coloque algo absolutamente, necesita que uno de los contenedores principales se coloque en una posición relativa, ya que esto hará que el artículo se coloque absoluto respecto al contenedor principal que sea relativo.
Como no tenías elementos relativos, el css no sabrá en qué posición está el div y, por lo tanto, no sabrá qué tomar 100% de altura.
http://jsbin.com/ubalax/1/edit . Puede ver los resultados aquí
body {
position: relative;
float: left;
height: 3000px;
width: 100%;
}
body div {
position: absolute;
height: 100%;
width: 100%;
top:0;
left:0;
background-color: yellow;
}