div niño de posición absoluta se expande para adaptarse al padre?

Question

¿Hay alguna forma en que un niño posicionado en posición absoluta se expanda para llenar su elemento primario relativo? (La altura de parent no está fija) Esto es lo que hice y funciona bien con Firefox e IE7 pero no con IE6. :(

<div id="parent"> 
    <div id="child1"></div> 
</div> 

#parent { position: relative; width: 200px; height:100%; background:red } 
#child1 { position: absolute; top: 0; left: 200px; height: 100%; background:blue } 

Answer 1

Si no recuerdo mal hay un error con la forma en IE6 maneja altura div. Sólo se creará el div a la altura necesaria para contener el contenido dentro de ella cuando la altura se ajusta al 100%. Lo haría recomendar dos enfoques:

1. no se preocupe por el apoyo a IE6, ya que es un navegador muerto de todos modos
2. Si eso no funciona, usar algo como jQuery para obtener la altura de la div padre y luego ponga el div infantil a esa altura.
3. fake it estableciendo el centrico A menos que sea del mismo color, nadie notará la diferencia

Answer 2

Puede lograr esto configurando los atributos superior e inferior del elemento secundario.

See how this is done

En la parte inferior de dicho artículo, hay un enlace a Dean Edwards IE7 (e IE8) biblioteca de JS que usted debe incluir para los visitantes de IE6. Es una biblioteca JS que realmente hace que IE6 se comporte como IE7 (u 8) cuando lo incluye. ¡Dulce!

Dean Edwars' IE7 and 8 JS libraries

Answer 3

Por lo que yo sé, no hay manera de ampliar un elemento principal en torno a un elemento hijo con posición absoluta. Al hacer que el elemento hijo esté completamente posicionado, lo está eliminando del flujo regular de elementos de la página.

Hace poco construí un sitio web de dos columnas en el que la columna de la derecha estaba absolutamente posicionada pero la columna de la izquierda no. Si la columna de la izquierda tenía menos contenido y una altura menor que la columna de la derecha, la página cortaría la columna de la derecha ya que estaba absolutamente posicionada.

Para resolver esto, tuve que determinar si la altura de la columna de la derecha era mayor que la altura de la columna de la izquierda y establecer la altura de la div principal a la mayor de las dos.

Aquí está mi solución de jQuery. No soy muy codificador, así que siéntete libre de ajustar esto:

jQuery(function(){ 

    var rightColHeight = jQuery('div.right_column').height(); 
    var leftColHeight = jQuery('div.left_column').height(); 

    if (rightColHeight > leftColHeight){ 
    jQuery('.content_wrap').height(rightColHeight+'px'); 
} 
}); 

Answer 4

Eso es fácil. El truco está fijando top: 0px y bottom: 0px al mismo tiempo

Aquí está el código de trabajo

html, body { 
    width: 100%; 
    height: 100%; 
    overflow: hidden; 
} 

#parent { 
    display: block; 
    background-color: #ff0; 
    border: 1px solid #f00; 
    position: relative; 
    width: 200px; 
    height: 100%; 
} 
#child1 { 
    background-color: #f00; 
    display: block; 
    border: 1px solid #ff0; 
    position: absolute; 
    left: 200px; 
    top: 0px; 
    bottom: 0px; 
} 

Salida un ejemplo de trabajo aquí http://jsfiddle.net/Qexhh/