Сделать абсолютное положение div развернуть родительскую высоту div

хотя растяжение до элементов с position: absolute невозможно, часто есть решения, где вы можете избежать абсолютного позиционирования при получении того же эффекта. Посмотрите на эту скрипку, которая решает проблему в вашем конкретном случае http://jsfiddle.net/gS9q7/

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

.child1 {
    width: calc(100% - 160px);
    float: right;
}
.child2 {
    width: 145px;
    float: left;
}

наконец, добавьте clearfix к родителю, и все готово (см. скрипка для полного решения).

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

Feeela право но вы можете сделать родителей div сжатие / расширение до дочернего элемента, если вы отмените свой div позиционирование такой:

.parent{
    postion: absolute;
    /* position it in the browser using the `left`, `top` and `margin` 
       attributes */
}

.child{
    position: relative;
    height: 100%;
    width: 100%;

    overflow: hidden;
    /* to pad or move it around using `left` and `top` inside the parent */
}

Это должно работать для вас.

есть довольно простой способ решить эту.

вам просто нужно дублировать содержимое child1 и child2 в относительных divs с display: none в Родительском div. Скажем child1_1 и child2_2. Поместите child2_2 сверху и child1_1 внизу.

когда ваш jquery (или что-то еще) вызывает абсолютный div, просто установите соответствующий относительный div (child1_1 или child2_2) с display:block и visibility:hidden. Относительный ребенок по-прежнему будет невидимым, но сделает div родителя высший.

У меня была похожая проблема. Чтобы решить эту проблему (вместо вычисления высоты iframe с помощью тела, документа или окна), я создал div, который обертывает все содержимое страницы (например, div с id="страница"), а затем я использовал его высоту.

есть лучший способ сделать это сейчас. Вы можете использовать свойство bottom.

    .my-element {
      position: absolute;
      bottom: 30px;
    }

Я придумал другое решение, которое мне не нравится, но делает свою работу.

в основном дублируют дочерние элементы таким образом, что дубликаты не видны.

<div id="parent">
    <div class="width-calc">
        <div class="child1"></div>
        <div class="child2"></div>
    </div>

    <div class="child1"></div>
    <div class="child2"></div>
</div>

CSS:

.width-calc {
    height: 0;
    overflow: hidden;
}

Если эти дочерние элементы содержат мало разметки, то воздействие будет небольшим.

Это очень похоже на то, что предложил @ChrisC. Он использует не абсолютный позиционированный элемент, а относительный. Может быть, мог бы работать на вас

<div class="container">
  <div class="my-child"></div>
</div>

и ваш css такой:

.container{
    background-color: red;
    position: relative;
    border: 1px solid black;
    width: 100%;
}

.my-child{
    position: relative;
    top: 0;
    left: 100%;
    height: 100px;
    width: 100px;
    margin-left: -100px;
    background-color: blue;
}

https://jsfiddle.net/royriojas/dndjwa6t/

" вы либо используете фиксированные высоты, либо вам нужно задействовать JS."

вот пример JS:

---------- пример jQuery JS--------------------

    function findEnvelopSizeOfAbsolutelyPositionedChildren(containerSelector){
        var maxX = $(containerSelector).width(), maxY = $(containerSelector).height();

        $(containerSelector).children().each(function (i){
            if (maxX < parseInt($(this).css('left')) + $(this).width()){
                maxX = parseInt($(this).css('left')) + $(this).width();
            }
            if (maxY < parseInt($(this).css('top')) + $(this).height()){
                maxY = parseInt($(this).css('top')) + $(this).height();
            }
        });
        return {
            'width': maxX,
            'height': maxY
        }
    }

    var specBodySize = findEnvelopSizeOfAbsolutelyPositionedSubDivs("#SpecBody");
    $("#SpecBody").width(specBodySize.width);
    $("#SpecBody").height(specBodySize.height);

также рассмотрим следующий подход:

CSS:

.parent {
  height: 100%;
}
.parent:after {
  content: '';
  display: block;
}

также, поскольку вы пытаетесь переместить divs, рассмотрите CSS grid

абсолютные взгляды позиционируют себя против ближайшего предка, который не статически расположен (position: static), поэтому, если вы хотите абсолютное представление, расположенное против данного родителя, установите parent position to relative и ребенка position to absolute

попробуйте это, это работает для меня

.child {
    width: 100%;
    position: absolute;
    top: 0px;
    bottom: 0px;
    z-index: 1;
}

он установит высоту ребенка в родительскую высоту