Question

我有这个小提琴here，这就是下面的插图

enter image description here

我需要实现的是使黑色容器根据项目内部动态扩展（项目为A，B，C）输出必须

enter image description here

没有静态设置高度

我的HTML是

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

我的css是

.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

您可以使用此脚本。首先计算最大高度，然后设置容器的高度

$(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 2

如上所述，JS可能更合适，但我认为只有CSS的更快方式也可能具有吸引力。

我们的想法是container取body的高度。

添加

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

并将container高度更改为

min-height:100%;

这是一个updated fiddle。

希望它对你有所帮助。

Answer 3

我更喜欢使用jQuery，所以在这里，＆＃34;借用＆＃34; this回答代码几乎是我们所需要的。刚做了一些小改动。

因此，我们看看父母的孩子div并获得最远的孩子位置，添加孩子的身高，然后将父母的身高设置为。热潮，完成了。

＆＃13;

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);
  }
});

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

Answer 4

在js中，您可以获得每个绝对定位元素的位置。我给你写了一个脚本，它找到了最大值和视角，并将这个宽度和高度应用到容器中：http://jsfiddle.net/45atnh0u/7/ 它主要使用$(this).offset().left和$(this).offset().top

但要保持正确和最低价值。

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/

如何包含位置绝对div？

5 个答案: