Как содержать позицию абсолютного div?

Question

У меня есть эта скрипка here и это иллюстрация ниже

что мне нужно добиться того, чтобы сделать черный контейнер динамически расширить базу на элементе внутри (детали А, В, С) выход должен быть

без установки высоты статический

моего HTML является

<div class="container"> 
    <div class="itemA">A</div> 
    <div class="itemB">B</div> 
    <div class="itemC">C</div> 
<div>  

мой КСС

.container{ 
    position:relative; 
    width:200px; 
    min-height:300px; 
    background-color:black 
} 
.itemA{ 
    position:absolute; 
    top:260px; 
    background-color:red; 
    width:30px; 
    height:30px; 
} 
.itemB{ 
    position:absolute; 
    top:50px; 
    right:90px; 
    background-color:green; 
    width:30px; 
    height:30px; 
} 
.itemC{ 
    position:absolute; 
    top:220px; 
    right:50px; 
    background-color:blue; 
    width:30px; 
    height:30px; 
} 

Answer 1

Как уже упоминалось выше, JS может быть лучше подходят, но я думал, что более быстрый способ с только CSS может также обратиться.

Идея для container взять высоту body.

Добавить

body { 
    height: 100%; 
    position: absolute; 
} 

и изменить container высоту

min-height:100%; 

Вот updated fiddle.

Надеюсь, это поможет вам.

Answer 2

Я предпочитаю использовать jQuery, так что вот оно, «заимствовано» this Код ответа как его в значительной степени то, что нам нужно. Сделали небольшие изменения.

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

var t = 0; 
 
$(".container div").each(function() { 
 

 
    var position = $(this).position(); 
 
    if (position.top > t) { 
 

 
    // Get the position and the height so we can set the parent height 
 
    t = position.top + $(this).height(); 
 
    $('.container').height(t); 
 
    } 
 
});

.container { 
 
    position: relative; 
 
    width: 200px; 
 
    min-height: 200px; 
 
    background-color: black 
 
} 
 
.itemA { 
 
    position: absolute; 
 
    top: 260px; 
 
    background-color: red; 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 
.itemB { 
 
    position: absolute; 
 
    top: 50px; 
 
    right: 90px; 
 
    background-color: green; 
 
    width: 30px; 
 
    height: 30px; 
 
} 
 
.itemC { 
 
    position: absolute; 
 
    top: 220px; 
 
    right: 50px; 
 
    background-color: blue; 
 
    width: 30px; 
 
    height: 30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="itemA">A</div> 
 
    <div class="itemB">B</div> 
 
    <div class="itemC">C</div> 
 
</div>

Answer 3

Вы можете использовать этот скрипт. Сначала вычислить максимальную высоту, то установите высоту контейнера

$(function(){ 
 
    var y = 0; 
 
    $('.container .item').each(function(){ 
 
    y = Math.max(y, $(this).height() + $(this).position().top); 
 
    }); 
 

 
    $('.container').css('height', y); 
 
});

.container{ 
 
    position:relative; 
 
    width:200px; 
 
    min-height:200px; 
 
    background-color:black 
 
} 
 
.itemA{ 
 
    position:absolute; 
 
    top:260px; 
 
    background-color:red; 
 
    width:30px; 
 
    height:30px; 
 
} 
 
.itemB{ 
 
    position:absolute; 
 
    top:50px; 
 
    right:90px; 
 
    background-color:green; 
 
    width:30px; 
 
    height:30px; 
 
} 
 
.itemC{ 
 
    position:absolute; 
 
    top:220px; 
 
    right:50px; 
 
    background-color:blue; 
 
    width:30px; 
 
    height:30px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<div class="container"> 
 
    <div class="itemA item">A</div> 
 
    <div class="itemB item">B</div> 
 
    <div class="itemC item">C</div> 
 
<div>

Answer 4

В JS вы можете иметь позицию каждого абсолютного positionned элементов. Я написал вам сценарий, найти наибольшее значение и verticaly горизонтальна и применить эту ширину и высоту контейнера: http://jsfiddle.net/45atnh0u/7/ Его в основном использует $(this).offset().left и $(this).offset().top

Но быть carrefull с правой и нижними значениями.

Answer 5

Ближайшим является предоставление переполнения контейнера: скрытый, а затем перемещать элементы слева направо сверху вниз в размерах вашего контейнера.Если container has width 200px вы перемещаете элемент left 200px - element width, он должен оставаться в вашем контейнере.

ОБНОВЛЕНО скрипка:

.container{ 
    display: block; 
    position:relative; 
    width:200px; 
    min-height:200px; 
    background-color:black; 
    overflow: hidden; 
} 
.itemA{ 
    position:absolute; 
    top: 0; 
    left: 170px; 
    background-color:red; 
    width:30px; 
    height:30px; 
} 
.itemB{ 
    display: block; 
    position:absolute; 
    top:50px; 
    right:90px; 
    background-color:green; 
    width:30px; 
    height:30px; 
} 
.itemC{ 
    display: block; 
    position:absolute; 
    bottom: 0; 
    right:30px; 
    background-color:blue; 
    width:30px; 
    height:30px; 
} 

http://jsfiddle.net/45atnh0u/8/