Question

我希望我的父div扩展内容的高度，因为我的内容将是动态的。但是，内容必须（我认为）绝对定位，以便它们可以垂直重叠。

我已经得出结论，我必须使用JS来查找容器中最后一个元素从顶部到底部的偏移量，然后将高度设置为。

我现在正在做这样的事情：

var lastElement = document.getElementById('three');
var bounds = lastElement.getBoundingClientRect();
var bottomOffset = bounds.top + $("#three").height();
$("#container").height(bottomOffset);

然而，在我的应用程序中这很笨拙，并且高度的应用不是瞬间的，导致了一个笨重的网站。

有更好的方法吗？

var lastElement = document.getElementById('three');
var bounds = lastElement.getBoundingClientRect();
var bottomOffset = bounds.top + $("#three").height();
$("#container").height(bottomOffset);

body,
html {
  height: 100% padding: 0;
  margin: 0;
}

.absolute {
  display: inline-block;
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
}

#two {
  top: 80px;
  left: 120px
}

#three {
  top: 160px;
  left: 240px;
}

#container {
  position: relative;
  width: 100%;
  ;
  background-color: yellow;
  ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="absolute" id="one"></div>
  <div class="absolute" id="two"></div>
  <div class="absolute" id="three"></div>
</div>

View on JSFiddle

Answer 1

你可以在没有任何JS的情况下完成你的结果，而是在框周围使用CSS margin来获得相同的结果。

对于水平边距，您还可以使用百分比（根据OP的要求）对于垂直边距，这会产生意外结果，因为百分比仍会引用 width of the container (under "Property Values")，而不是高度。

＆＃13;

html,body {height:100%; padding:0; margin:0;}

.container {
  background-color: yellow;
}

.box {
  display: inline-block;
  width: 100px;
  height: 100px;
  margin-right: 2%;
  background-color: blue;
}
.box.one {margin-top:0; margin-bottom:160px;}
.box.two {margin-top:80px; margin-bottom:80px;}
.box.three {margin-top:160px; margin-bottom:0;}

＆＃13;

<div class="container">
  <div class="box one"></div>
  <div class="box two"></div>
  <div class="box three"></div>
</div>

＆＃13;

＆＃13; 像素边距：https://jsfiddle.net/xzq64tsh/
保证金百分比：https://jsfiddle.net/xzq64tsh/3/

Answer 2

元素可以相互重叠而不需要绝对位置。例如，您可以使用负边距来创建重叠：

body,
html {
  height: 100% padding: 0;
  margin: 0;
}

#container > div {
  background-color: blue;
  width: 100px;
  height: 100px;
}

#two {
  margin-top:-50px;
  margin-left:50px;
}

#three {
   margin-top:-80px;
  margin-left:auto;
  margin-right:50px;
}

#container {
  position: relative;
  width: 100%;
  background-color: yellow;
}

<div id="container">
  <div id="one"></div>
  <div id="two"></div>
  <div id="three"></div>
</div>

Answer 3

也许取出getBoundingClientRect()函数，使用jQuery可能会加快速度并简化它。

var lastElement = $('#three');
var bottomOffset = lastElement.offset().top + lastElement.height();
$("#container").height(bottomOffset);

body,
html {
  height: 100% padding: 0;
  margin: 0;
}

.absolute {
  display: inline-block;
  position: absolute;
  background-color: blue;
  width: 100px;
  height: 100px;
}

#two {
  top: 80px;
  left: 120px
}

#three {
  top: 160px;
  left: 240px;
}

#container {
  position: relative;
  width: 100%;
  ;
  background-color: yellow;
  ;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <div class="absolute" id="one"></div>
  <div class="absolute" id="two"></div>
  <div class="absolute" id="three"></div>
</div>

是否可以使父元素（相对）填充其绝对定位内容的高度？

3 个答案: