我有没有高度的父 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的高度相同?
我认为在保持孩子们绝对定位的同时,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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)