Altura DIV absoluta 100%

He estado trabajando en esto durante las últimas dos horas, y la búsqueda en la web y el stackoverflow no han sido de mucha ayuda. ¿Cómo hago para que #gradient y #holes llenen toda la página?Altura DIV absoluta 100%

He utilizado la función Inspeccionar elemento en Safari, y cuando resalto el elemento del cuerpo no llena toda la ventana.
alt text 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; 
}

Fuente

2010-02-01 woody993

¿Es capaz de utilizar Javascript/jQuery para esto? si es así, esa es probablemente una forma razonable de lograr esta funcionalidad. –

No hay nada que me detenga, excepto mi disgusto por ello – woody993

¿Por qué no simplemente establecer sus alturas a algo obsceno entonces? Si se adhieren a la parte superior de la página de todos modos, ¡entonces no debería ser un problema! –

Bueno parece a mí que el elemento con todo el contenido se hace flotar. Si es así, no va a expandir el cuerpo a menos que esté despejado.

Fuente

2010-02-01 14:57:18 prodigitalson

Creo que podría tenerlo, lo eché de menos porque no se publicó el css para el cuadro de contenido. – ghoppe

-1

Si no recuerdo mal, con el fin de ser capaz de especificar las posiciones de los contenedores secundarios de un contenedor (A) (B1, B2, ...), su posición debe ser absoluta. La posición del contenedor body no es.

Supongo que debe agregar la propiedad position:absolute; al selector html,body.

Fuente

2010-02-01 14:07:31 xtofl

intentado, sin éxito todavía – woody993

La mejor manera es usar javascript. min-height no es compatible con todos los navegadores.

Javascript usando prototipo:

<script type="text/javascript"> 
var height = $(document.body).getHeight(); 
document.write('<div id="yourdiv" style="height:'+height+'px;width:100%;"></div>'); 
</script>

Fuente

2010-02-01 14:22:08 sabansaulic

No estoy seguro de escribir el div en la página directamente es la mejor idea: ¿por qué no usar $ ('# divName) css (' altura', altura) en lugar [o el prototipo equivalente]? –

No es necesario usar javascript. Si usted debe tener compatibilidad con IE6 (Blech!), Ya que la altura es decir, <6 trata incorrectamente como min-altura, es mejor usar el truco estrella html: * html #gradient { altura: 100%; } – ghoppe

La menor cantidad de visitantes usará Windows, si corresponde. – woody993

[Actualización]
nuevo enfoque
Esto debe hacerlo ..

usando display:table en sus 2 elementos debería hacerlo (funciona en mis pruebas). (Pero Usted deberá asignar valores de anchura ahora ..

Sin embargo no estoy seguro de si debe definir elementos anidados como mesa de células etc .. que se convertiría en inmanejable ..

tener una oportunidad, aunque ..

versión no trabajo viejo
¿Has probado en #gradient y #holes el siguiente?

#gradient { 
    height:auto!important; 
    height:100%; 
    min-height:100%; 
    .. 
    .. 
} 
#holes{ 
    height:auto!important; 
    height:100%; 
    min-height:100%; 
    .. 
    .. 
}

Fuente

2010-02-01 14:32:30

que tengo ahora, todavía no hay nada – woody993

sí .. i publicado sin comprobar .. sólo funcionará para el elemento desbordante .. (aquella cuyo contenido irá más allá de la parte inferior de la ventana ..) –

publicado un enfoque diferente .. echa un vistazo .. –

Creo que lo hiciste bien. Esto funciona en Chrome (¡WebKit también!) Y en IE7/8/Quirks cada vez que pones ancho: 100% en #gradient y #holes, no puedo probar Safari en Mac ahora (solo lo tengo en casa) pero en teoría deberías verlo correctamente

Dicho esto, tal vez esto es un tipo de documento, intente con otros diferentes?

Fuente

2010-02-01 14:39:57

Probado XHTML 1.1, 1.0 Transitional, 4.01 Transitional – woody993

Para ser honesto, creo que sólo voy a overflow:auto en mi contenido de modo que toda la página no necesita ser desplazado

Fuente

2010-02-01 14:55:21 woody993

¿Has intentado configurar así?

#holes { 
    position: absolute; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    left: 0; 
}

se estirará el elemento para llenar toda el área de página

Fuente

2010-02-01 15:49:04

$('div.class').css({'height':(($(document).height()))+'px'});

Fuente

2010-11-05 05:33:26 beacks

Tenga en cuenta que la propiedadaltura especificada en porcentaje es calculated with the respect to the containing block ..which no lo hace necesaria tiene que ser la inmediata antepasado - "The containing block for a positioned box is established by the nearest positioned ancestor or, if none exists, the initial containing block". Apuesto a que esto es lo que está pasando en el caso de la pregunta ya que no hay antepasado posicionado (el que tiene position: establecer ya sea a relative o absolute).

lo tanto, el "bloque que contiene" se resuelve a la initial containing block que corresponde con las dimensiones de la ventana gráfica (ventana). Configuración position:relative a body tomará la altura body 's en cuenta y estirar el contenido absolutamente posicionado a lo largo body por completo.

More on containing block here.

Fuente

2011-10-07 13:48:15 Adam

Tru dat. OP debería aceptar esta respuesta. –

Esto es lo que estaba buscando, ¡gracias! –

que estaba teniendo el mismo problema. Se solucionó cambiando la posición: absoluta a posición: fija.

Fuente

2012-12-14 17:28:37

Desarrollando un menú móvil y esto funcionó para mí mejor que las respuestas anteriores. – Sethen

¡Tío! He estado buscando cómo resolver esto por un día entero! ¡Esto fue! ¡Muchas gracias! – acdcjunior

Esta debería ser la respuesta aceptada, funciona como un amuleto – ianstarz

Aplicar los estilos CSS a #gradient & #hoyos & poner la secuencia de comandos 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>

Fuente

2015-03-23 10:00:18

Respuesta

Cuestiones relacionadas