Автонастройка контейнера <DIV> высота для размещения абсолютно позиционированного дочернего <DIV> s

Ответ 1

Если вы используете позицию: relative вместо абсолютной позиции, пустое пространство останется в структуре страницы, где должен находиться элемент, и это пространство будет высотой перемещенного элемента.

Итак, вы можете плавать chld1 и chld2, чтобы получить их бок о бок, добавить верхнее и нижнее дополнение, чтобы нажать на кнопку 3, и использовать положение относительно разделить их и переместиться на любую высоту. Затем используйте clear и на chld3.

Что-то вроде

#exp_outer {
  width: 400px;
  border: 1px solid black;
}
#chld1 {
  float: left;
  margin: 30px 0 20px;
  left: 50px
}
#chld2 {
  float: right;
  margin: 30px 0 20px;
  right: 50px;
}
#chld3 {
  left: 150px;
  clear: both;
}
.box {
  position: relative;
  width: 80px;
  height: 80px;
  border: 1px solid black;
}

<div id="exp_outer">
  <div id="chld1" class="box">Child1</div>
  <div id="chld2" class="box">Child2</div>
  <div id="chld3" class="box">Child3</div>
</div>

Ответ 2

переполнения: авто

Это новый метод clearfix, FYI. Однако он не всегда расширяет контейнер до высоты его самого высокого и абсолютно расположенного ребенка.

Ответ 3

i закончил использование clearfix, это позволяет мне установить желаемую ширину контейнера, и высота будет автоматически отрегулирована в зависимости от содержимого (это работает во всех браузерах).

<style>
        .inner_box {
            position: relative;
            float: left;
            width: 50px; 
            height: 50px; 
            border: dashed thin;
            margin: 5px 5px 5px;
            text-align: center;
        }

        .outer_box {
            position: relative; 
            top: 200px;
            border: solid thin; 
            width: 190px;
            //height: 1%;
        }

        .outer_box:after {
            content: '.'; 
            display: block; 
            clear: both; 
            visibility: hidden; 
            height: 0; 
            line-height: 0;
        }
    </style>

<div class="outer_box">
    <div class="inner_box">1</div>
    <div class="inner_box">2</div>
    <div class="inner_box">3</div>
    <div class="inner_box">4</div>
    <div class="inner_box">5</div>
    <div class="inner_box">6</div>
</div>

Ответ 4

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

Попытайтесь достичь своей цели путем позиционирования поплавков вместо абсолютного позиционирования div. Это не так удобно (из-за начального положения ваших поплавков это не задница 0,0), но он будет работать.

Ответ 5

Я очень беспокоился, чтобы добиться этого, и теперь, когда у меня есть решение, похоже, что это было бы так просто, во всяком случае, необходим jQuery/Javascript:

jQuery(window).load(function(){
    var valueCheck = [];
    jQuery('.projectsWrap .hentry').each(function(){
        var itemObj = jQuery(this);
        var itemValues = itemObj.position();
        var top = itemValues.top;
        var height = jQuery(this).height();
        var sum = top + height;
        valueCheck.push(sum);
    });
    var res = Math.max.apply(Math, valueCheck);
    jQuery('.projectsWrap').height(res);
});

Я написал и реализовал этот маленький script в теме WordPress, поэтому вы видите, что "$" преобразуются в "jQuery" для совместимости, но если вы не используете WordPress, вы должны вернуть их обратно в "$".

Ситуация, в которой я находилась, была еще сложнее, чем проблема в вопросе, потому что пользователь хотел автономно полностью позиционировать каждый элемент в контейнере, и порядок, в котором элементы появились в dom, не был связан с их положением в контейнере: совершенно неожиданные результаты (первый элемент в dom может отображаться, например, как последний нижний элемент в окне).

Также высоты элементов были разными, все разные высоты и все разные верхние значения (смещение), кошмар.

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

Ответ 6

Я не мог найти простую обходную проблему с чистым javascript для этой маленькой проблемы, поэтому вот она (вам нужно добавить поля id в свой HTML-код):

var containerBox = document.getElementById('container');
var statBoxBottom = document.getElementById('chld3').getBoundingClientRect().bottom + window.scrollY;
var mainDivBottom = containerBox.getBoundingClientRect().bottom + window.scrollY;
var boxHeightDiff = statBoxBottom - mainDivBottom;
if (boxHeightDiff > 0) 
    containerBox.style.height = Math.ceil( containerBox.offsetHeight + boxHeightDiff ) + 'px';

Он в основном увеличивает высоту контейнера на основе абсолютного нижнего положения "chld3".

Ответ 7

Если вы даете div.container div высоту 100%, он должен рассчитать его из дочерних элементов в большинстве браузеров, но, к сожалению, не IE6 или ниже.