Сделать элемент достаточно широким, чтобы содержать абсолютно позиционированные элементы

Question

Если у меня есть div#child, который расположен в left: 5000px, и мое окно уже, чем это, возможно ли для моего div#parent быть достаточно широким, чтобы содержать его дочерний элемент?

A width: 100% имеет такую ​​же ширину, что и тело, в котором нет ребенка. Я не знаю ширину / положение ребенка. Я бы предпочел не использовать JavaScript (но если нужно, как?).

Answer 1

Я думаю, что вы должны использовать JavaScript / jQuery для вашей цели.Вот пример решения в jQuery: http://jsfiddle.net/hU2TV/

CSS

#parent {
    width: 100%;
    background-color: red;
    height: 100px;
}
#child {
    position: absolute;
    left: 700px;
    background-color:blue;
    width: 50px;
    height: 50px;
}

JS

(function ($) {
    var child = $('#child'), parent = $('#parent');
    if (child.offset().left + child.width() > parent.width()) {
        parent.width(child.offset().left + child.width());
    }
}($));

HTML

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

С уважением!

Answer 2

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

parentWidth = childWith + childLeft