如何将父级div的高度设置为绝对定位的子级div？

Question

我有一个父级div，它没有高度，在其中嵌套了另一个子级div，该子级div采用绝对定位。子级div的高度为652px。但是我无法在父级div中获得相同的高度。我尝试使用clear:both、overflow等方法。

以下是代码:

HTML

    <div class="content">
      <div class="container">
          some other elements whose height is 652px... 
      </div>
     </div>

CSS

.content {
  position: relative;
}

.container {
  position: absolute;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: 120px 0;
}

内容div的高度为0。容器div的高度为652px。如何使内容div的高度与容器div的高度相同？

- user9813762

Answer 1

我认为在保持子元素绝对定位的情况下，使用CSS是不可能实现这一点的。

绝对定位的元素完全脱离文档流，因此它们的尺寸不能改变其父元素的尺寸。

如果您确实必须在保持子元素的position: absolute的情况下实现此效果，可以通过JavaScript找到绝对定位后的子元素的高度，并将其用于设置父元素的高度。

var content=document.querySelector('.content');
var container=document.querySelector('.container');

content.style.height=container.offsetHeight + 'px';

*{box-sizing:border-box;}

.content {
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  /*padding: 120px 0;*//*Padding removed for example*/
   border:5px solid green;
}
.container{
  position: absolute;
  overflow: hidden;
  width: 100%;
  border:2px solid red;
  height:652px;
}

<div class="content">
  <div class="container">
    some other elements whose height is 652px...
  </div>
</div>

- Gautam Naik

Answer 2

请在发布问题时提供有效的代码。您的HTML和CSS语法都不正确。（CSS中缺少{，:和;，HTML中className应为class）

一旦修复了您的代码，它将按照预期工作。绝对定位的父元素将根据其子元素扩展其尺寸，因此如果子元素为652px，则父元素将扩展到652px。但是，如果您像您所做的那样指定overflow: hidden;并指定固定的宽度或高度（您没有这样做），则绝对元素将隐藏任何超出固定宽度或高度的内容。

- Marco Yammine