Question

我有不带高度的父div，也嵌套了另一个子div，其位置绝对在其中。子div的高度为652px。但是我不能在父div中获得相同的高度。我试图玩得很清楚：两者都溢出。

代码如下：

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

我认为在保持孩子绝对位置的同时，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>

Answer 2

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

一旦修复您的代码，它就会按应有的方式工作。放置在绝对位置的父元素将根据子元素扩展其尺寸，因此，如果子元素为652px，则父元素将扩展为652px。但是，如果像您一样指定overflow: hidden;并指定固定宽度或高度（您没有指定），则绝对元素将隐藏固定宽度或高度以外的任何内容。

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

2 个答案: