如何设置父div的高度为子div的position: absolute
如何设置父div的高度为子div的position: absolute
提问于 2018-08-19 02:37:47
我有一个没有高度的父div，也嵌套了另一个子div，里面有绝对位置。Child 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;
}Content div的高度为0。容器div的高度是652px。如何让content div的高度与容器div的高度一致？
回答 2
Stack Overflow用户
回答已采纳
发布于 2018-08-19 03:01:03
我不认为在保持孩子们绝对位置的情况下，使用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>
Stack Overflow用户
发布于 2018-08-19 02:55:29
发布问题时，请提供有效代码。您的html和css上的语法都不正确。( CSS中缺少{、:和;，HTML中className应为class )
一旦修复，你的代码就可以正常工作了。定位为绝对的父元素将根据其子元素扩展其尺寸，因此，如果子元素是652px，则父元素将扩展到652px。但是，如果像以前一样指定overflow: hidden;并指定固定的宽度或高度(您没有这样做)，那么absolute元素将隐藏固定宽度或高度之外的任何内容。
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/51911553
复制相关文章
相似问题