css - not - height 100 position absolute
Altura absoluta DIV 100% (11)
¿Has intentado configurar de esta manera?
#holes {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
}
Estirará el elemento para llenar toda el área de la página.
He estado trabajando en esto durante las últimas dos horas, y buscar en la web y en stackoverflow no ha sido un gran apoyo. ¿Cómo puedo hacer que #gradient y #holes llenen toda la página?
He usado la función Inspeccionar elemento en Safari, y cuando resalto el elemento del cuerpo no llena toda la ventana.
texto alt http://img534.imageshack.us/img534/9955/screenshot20100201at215.png
HTML:
<body>
<div id="gradient"></div>
<div id="holes"></div>
<div id="header">Header Text</div>
</body>
CSS:
html, body {
height:100%;
margin:0;
padding:0;
}
body {
background-image:url(../Images/Tile.png);
background-color:#7D7D7D;
background-repeat:repeat;
}
#gradient {
background-image:url(../Images/Background.png);
background-repeat:repeat-x;
position:absolute;
top:0px;
left:0px;
height:100%;
right:0px;
}
#holes {
background-image:url(../Images/Holes.png);
background-repeat:repeat;
position:absolute;
top:2px;
left:2px;
height:100%;
right:0px;
}
#header {
background-image:url(../Images/Header.png);
background-repeat:repeat-x;
position:absolute;
top:0px;
left:0px;
width:100%;
padding-top:24px;
height:49px; /* 73 - padding */
color:rgb(113, 120, 128);
font-family:Helvetica, Arial;
font-weight:bold;
font-size:24px;
text-align:center;
text-shadow:#FFF 0px 1px 0px;
}
Aplique los estilos CSS tanto a #gradient como a #holes y coloque el script después de su DIV.
.background-overlay{
position: absolute;
left: 0;
right: 0;
z-index: -1;
}
<body>
<div id="gradient"></div>
<div id="holes"></div>
<script type="text/javascript">
$(document).ready(function() {
var bodyHeight = $("body").height();
$(''#gradient,#holes'').height(bodyHeight);
})
</script>
<div id="header">Header Text</div>
Creo que lo hiciste bien. Esto funciona en Chrome (¡también en WebKit!) Y en IE7 / 8 / Quirks cuando pones ancho: 100% en #gradient y #holes, no puedo probar safari en Mac en este momento (solo lo tengo en casa) pero en teoría Deberías verlo correctamente.
Dicho esto, tal vez esto es una cosa doctype, pruebe diferentes?
La mejor manera es usar javascript. min-height no es compatible con todos los navegadores.
Javascript utilizando prototipo:
<script type="text/javascript">
var height = $(document.body).getHeight();
document.write(''<div id="yourdiv" style="height:''+height+''px;width:100%;"></div>'');
</script>
Para ser honesto, creo que solo voy a overflow:auto en mi contenido para que no sea necesario desplazar la página completa
Pues me parece que tu elemento con todo el contenido está flotando. Si es así, no se va a expandir el cuerpo a menos que se borre.
Si recuerdo correctamente, para poder especificar las posiciones de los contenedores secundarios de un contenedor (A) (B1, B2, ...), su posición debe ser absoluta. La posición del contenedor de tu body no lo es.
Supongo que debe agregar la position:absolute; Propiedad al html,body selector de html,body .
Tenga en cuenta que la propiedad de altura especificada en porcentaje se calcula con respecto al bloque que contiene ... que no necesariamente tiene que ser el antecesor inmediato - "El bloque que contiene un cuadro posicionado es establecido por el antepasado posicionado más cercano o, si no hay ninguno existe, el bloque que contiene inicial " . Apuesto a que esto es lo que está sucediendo en el caso del interrogador, ya que no hay un antepasado posicionado (el que tiene position: establecido en relative o absolute ).
Así que el "bloque que contiene" se resuelve en el bloque que contiene inicial que corresponde con las dimensiones de la ventana gráfica (ventana). position:relative ajuste position:relative con el body tomará en cuenta la altura del body y estirará el contenido absolutamente posicionado a lo largo del body completo.
Yo estaba teniendo el mismo problema. Se corrigió cambiando la posición: absoluta a la posición: fija.
[actualizar]
nuevo enfoque
Esto debería hacerlo ...
usar display:table en tus 2 elementos debería hacerlo ( funciona en mis pruebas ). (pero ahora tendrás que asignar valores de ancho ...
Sin embargo, no estoy seguro de si debe definir elementos anidados como tabla-celda, etc., lo que sería inmanejable.
Tener una oportunidad aunque ...
versión antigua que no funciona¿Has probado en
#gradient y #holes lo siguiente? #gradient {
height:auto!important;
height:100%;
min-height:100%;
..
..
}
#holes{
height:auto!important;
height:100%;
min-height:100%;
..
..
}
$(''div.class'').css({''height'':(($(document).height()))+''px''});