Абсолютное положение не позволяет браузеру рассчитать правильную высоту.Можно ли исправить эту проблему?

Question

Я занимаюсь разработкой браузерной игры.До сих пор я использовал все абсолютные позиции.Из-за этого я должен установить каждую высоту страницы сам.Сейчас пытаюсь решить эту проблему, но так как я использовал абсолютное положение во всем, это всегда мешает браузеру вычислить правильную высоту div.

Возможно ли этого добиться.Я имею в виду, например, у меня есть div и внутри многих div, который использует абсолютную особенность позиции.Поэтому я хочу, чтобы этот основной div автоматически вычислял его высоту, которая будет суммой высоты вложенных div.В настоящее время все, что я попробовал, не удалось.Он вычисляет высоту как 1 px, если я устанавливаю высоту автоматически, а если я устанавливаю высоту 100% основного деления, он вычисляется как 557 px.

Спасибо.

Answer 1

Нет, с помощью чистого CSS невозможно изменить размер родительского элемента, чтобы он автоматически содержал все его дочерние элементы.

Редактировать: Вы спросили, возможно ли это с помощью jQuery. Это так, если вы знаете, когда кто-нибудь из детей меняется. В этом коде предполагается, что родитель является родителем смещения (т. Е. Для position установлено значение, отличное от static):

// element is a jQuery object
var max=0;
element.children().each(function(index, child) {
    child=$(child);
    var childPos=child.position();
    var childMax=childPos.top+child.outerHeight();
    if(childMax>max) {
        max=childMax;
    }
});
element.css({height: max+'px'});

Попробуйте решение jQuery на JSFiddle.

Answer 2

Вы должны понимать, что Position: absolute выводит div за пределы своего нормального потока. Это означает, что даже если div находится внутри другого div, когда он отображается, он находится вне их всех. Следовательно, вы не можете вычислить, что находится «внутри», потому что они фактически «снаружи».

Answer 3

Вы можете использовать CSS для чтения позиции. Я чувствую, что вы пытаетесь вычислить верхнюю и левую сторону с помощью CSS следующим образом:

documnent.getElementById('theDiv').style.left;

Но вы должны полагаться на смещение, которое рассчитывает браузер. Чтобы прочитать точное правильное положение, используйте offsetTop и offsetLeft

documnent.getElementById('theDiv').offsetLeft; //gives you right number.

Причина, по которой левое значение CSS будет отличаться от offsetLeft, заключается в том, что левое значение CSS - это размер пространства между левым краем элементов и его первым относительным родителем левым краем браузера.

если вы предпочитаете использовать jQuery, то есть два метода jQuery, которые определяют вашу позицию. Один - .position(), а другой - .offset(). Смещение является правильным для вас.