如何将父div的高度设置为子div的高度，位置：绝对

Question

我有没有高度的父 div，还嵌套了另一个具有绝对位置的子 div。子 div 的高度为 652px。但我无法在父 div 中获得相同的高度。我尝试使用clear：both，overflow。

这是代码：

超文本标记语言

    <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的高度为652p​​x。如何使内容div的高度与容器div的高度相同？

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>