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

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

29 голосов
/ 09 апреля 2009

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

+-----------------------+
| container             |
|  +------+   +------+  |
|  | 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" остается нулевой высоты. Я понимаю, что это может быть ожидаемым поведением, поскольку элементы «вынимаются» из потока, когда позиционируются абсолютно, но есть ли обходной путь для этого? (кроме предварительного расчета полученной высоты и установки ее вручную)

Ответы [ 7 ]

10 голосов
/ 26 октября 2009

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

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

9 голосов
/ 09 апреля 2009

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

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

В итоге я использовал 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>
2 голосов
/ 09 апреля 2009

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

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

1 голос
/ 15 октября 2013

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

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

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

0 голосов
/ 01 февраля 2016

Я не смог найти простой обходной путь чисто 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 голосов
/ 09 апреля 2009

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

...