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

【问题标题】：Is it possible to make parent element (relative) fill the height of its absolute positioned content?是否可以使父元素（相对）填充其绝对定位内容的高度？
【发布时间】：2018-03-15 08:32:39
【问题描述】：

我希望我的父 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

【问题讨论】：

标签： javascript html css absolute

【解决方案1】：

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

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

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

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

像素边距：https://jsfiddle.net/xzq64tsh/
百分比边距：https://jsfiddle.net/xzq64tsh/3/

【讨论】：

我应该提到我需要将框定位在屏幕右侧/左侧的 10%（或某个百分比）处。边距不适合这个吗？
@f7n 对于左/右边距，这是可能的，对于上边距/下边距则不是（因为这些仍然会占用 容器宽度的 10%，而不是高度）。
@f7n 对于左边距/右边距，只需在 CSS 中为.box：margin-right:10%; 或margin-left:10%;，或两者的组合，取决于所需的结果

【解决方案2】：

也许去掉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>

【讨论】：