重新定位相对子div时调整父div的高度

<style>
.clearfix::after {
  content: "";
  display: table;
  clear: both;
}
</style>

<div class="clearfix">
  <div style="position: relative;"></div>
</div>

<style>
.parent {
  position: relative;
  padding-bottom: 50px; /* 调整父div的高度 */
}
.child {
  position: absolute;
  top: 0;
}
</style>

<div class="parent">
  <div class="child"></div>
</div>

<style>
.parent {
  position: relative;
}
.child {
  position: relative;
}
</style>

<div class="parent">
  <div class="child"></div>
</div>

<script>
const parent = document.querySelector('.parent');
const child = document.querySelector('.child');

function adjustParentHeight() {
  const childHeight = child.offsetHeight;
  parent.style.height = childHeight + 'px';
}

window.addEventListener('resize', adjustParentHeight);
</script>