it-swarm.com.ru

автоматическая настройка высоты контейнера <DIV> для размещения абсолютно расположенных дочерних элементов <DIV>

есть ли способ автоматической регулировки высоты контейнера DIV для размещения абсолютно позиционированных дочерних DIV? Я хотел бы получить что-то вроде

.__ + ----------------------- + 
. | контейнер | 
 | + ------ + + ------ + | 
 | | Chld | | Chld | | 
 | | 1 | | 2 | | 
 | | | | | | 
 | + ------ + + ------ + | 
 | + ------ + | 
 | | Chld | | 
 | | 3 | | 
 | | | | 
 | + ------ + | 
 + ----------------------- + 

я пытаюсь что-то вроде:

<div class="container" style="position: relative; border: solid thin">
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 5px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 30px; top: 5px;
                             border: dashed thin;"><div>
    <div class="chld" style="width: 20px; 
                             height: 20px; 
                             position: absolute; left: 15px; top: 30px;
                             border: dashed thin;"></div>
</div>

но div "container" остается нулевой высоты. Я понимаю, что это может быть ожидаемым поведением, поскольку элементы «вынимаются» из потока, когда позиционируются абсолютно, но есть ли обходной путь для этого? (за исключением предварительного расчета полученной высоты и установки ее вручную)

29
Dmitry Avtonomov

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

Таким образом, вы можете плавать chld1 и chld2, чтобы получить их рядом, добавить верхний и нижний отступы для Push chld 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>

9
wheresrhys

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

Это новый clearfix метод, к вашему сведению. Однако он не всегда расширяет контейнер до высоты своего дочернего элемента tallest & абсолютно позиционированного.

10
Ahmad Bagadood

в итоге я использовал 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
Dmitry Avtonomov

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

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

2
buti-oxa

Я очень много беспокоился, чтобы достичь этого, и теперь, когда у меня есть решение, похоже, что это было бы так просто, в любом случае, нужен некоторый 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);
});

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

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

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

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

1
Nicola

Я не смог найти простой обходной путь чисто 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».

0
Konrad Gałęzowski