如何将 parent div 的高度设置为 child div 位置：绝对

Question

我有 parent div 没有高度，还有嵌套的另一个 child div 里面有绝对位置。 Child div 的高度为 652px。但是我无法在 parent 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 的高度相同？

Answer 1

发帖时请提供有效代码。 html 和 css 的语法都不正确。（CSS中缺少{、:和;，HTML中className应该是class）

修复后，您的代码将按应有的方式运行。绝对定位的父元素将根据其子元素扩展其尺寸，因此如果子元素为 652px，则父元素将扩展为 652px。但是，如果您像以前那样指定 overflow: hidden; 并指定固定宽度或高度（您没有指定），则绝对元素将隐藏固定宽度或高度之外的任何内容。

Answer 2

我认为 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>

如何将 parent div 的高度设置为 child div 位置：绝对

How to set parent div's height as child div with position: absolute

html

css

height

position

absolute