Абсолютный позиционированный дочерний div расширяется, чтобы соответствовать родительскому?

Question

Есть ли в любом случае, чтобы абсолютный позиционированный ребенок расширялся, чтобы заполнить его относительный родитель? (Высота родителя не исправлена) Вот что я сделал, и он отлично работает с Firefox и IE7, но не с 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

Если я правильно помню, есть ошибка с тем, как IE6 обрабатывает высоту DIV. Это будет только создать DIV на высоту, необходимую для вмещения содержимого в нем, когда высота устанавливается на 100%. Я бы рекомендовать два подхода:

1. не беспокойтесь о поддержке IE6, как это мертвый браузер все равно
2. Если это не работает, используйте что-то вроде JQuery, чтобы получить высоту родительского DIV, а затем установите ребенок div до этой высоты.
3. подделка, устанавливая backgro unds должны быть одного цвета, поэтому никто не замечает разницу

Answer 2

Вы можете достичь этого, установив верхний и нижний атрибуты дочернего элемента.

See how this is done

В нижней части этой статьи, есть ссылка на Дин Эдвардс (IE7 и IE8) JS библиотеку, которые вы должны включить для посетителей IE6. Это JS-библиотека, которая на самом деле ДЕЛАЕТ IE6 вести себя как IE7 (или 8), когда вы ее включаете. Милая!

Dean Edwars' IE7 and 8 JS libraries

Answer 3

Насколько я знаю, нет никакого способа расширения родительского элемента вокруг абсолютно позиционированного дочернего элемента. Сделав дочерний элемент абсолютно позиционированным, вы удаляете его из обычного потока элементов страницы.

Недавно я построил сайт с двумя колонками, где правая колонка была абсолютно позиционирована, но левой колонки не было. Если в левом столбце было меньше содержимого и меньше высоты, чем в правой колонке, страница обрезала бы правый столбец, поскольку он был абсолютно позиционирован.

Чтобы решить эту проблему, мне нужно было определить, была ли высота правого столбца больше высоты левого столбца, и если так задана высота родительской высоты div для большей из двух.

Это мое решение jQuery. Я не очень кодер, поэтому не стесняйтесь настраивать это:

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

Это очень просто. Хитрость заключается в настройке top: 0px и bottom: 0px одновременно

Вот рабочий код

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; 
} 

Заканчивать рабочий пример здесь http://jsfiddle.net/Qexhh/