Абсолютно позиционированный дочерний элемент 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

Это просто. Хитрость заключается в одновременной установке 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/

Answer 2

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

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

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

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

Посмотрите, как это делается

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

Библиотеки Дина Эдварса IE7 и 8 JS