Как отрегулировать относительную высоту div по отношению к внутренней абсолютной высоте?

Например: http://jsfiddle.net/MYvYy/182/

У меня есть много элементов 'inner_box' внутри 'external_box'. Элементы Inner_box абсолютны.

Я хотел бы отрегулировать высоту внешнего_бокса так, чтобы все элементы inner_box соответствовали внешнему_сообщению.

Я знаю, что это можно сделать с помощью js. Но мне не очень нравится настраивать стиль со сценариями.

Итак, мне было интересно, можно ли сделать это с помощью CSS?

Ответ 1

Это невозможно с помощью CSS.

Макет:

Элемент с position:absolute находится вне потока макета остальной части страницы. Что касается относительного родителя, то абсолютный ребенок не занимает места в макете.

Это очень полезно, если вам нужно иметь всплывающее меню или навигационное меню, вложенное внутри контейнера, потому что это не повлияет на расположение контейнера. То, что подходит для position:absolute, подходит для.

Фиксированная высота:

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

Если использовать position:absolute и фиксированная высота не является вариантом, используйте JavaScript.

Ответ 2

У меня есть обходной путь для этой проблемы, он может не соответствовать вашей ситуации, но подумайте над этим.
Прежде всего, мы должны дублировать все абсолютные позиционные div, которые вы хотите, чтобы родительский элемент расширялся до его высоты. Таким образом, ваш HTML будет выглядеть следующим образом.

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box ghost">1</div>
</div>

Затем нам нужно добавить CSS-призрачный div так:

.inner_box.ghost{
    visibility: hidden;
    width: 100%;
    top: 0;
    left: 0;
    position: relative;
}

Ответ 3

Я могу предоставить вам исправление Javscript для этого, используя jQuery lib. сообщите мне, используете ли вы его или нет,

$('.outer_box').height($('.inner_box').outerHeight());

Эта строка исправит высоту внешнего_пакета

Ответ 4

Я исправил его, изменив свойство position div.inner_box на

position:relative

Если это не то, что вы ищете, или это не исправить, тогда вам придется использовать Javascript.

Ответ 5

// adjust height
var adjustInnerAbsHeight = function () {
    $('.our-core-values .core-value-item').each(function () {
        var self = $(this);
        var inner = self.find('.description');
        // fallback for resize
        self.removeAttr('style');
        var outerWidth = self.outerHeight();
        var innerWidth = inner.outerHeight();
        if(innerWidth > outerWidth){
            self.height(innerWidth);
        }
    });
};
adjustInnerAbsHeight();

$(window).resize(function () {
    adjustInnerAbsHeight();
});