子元素定位，父元素高度自适应-优快云博客

本文介绍了解决子元素使用position属性脱离文档流导致父元素高度丢失的问题，提供了三种解决方案：1. 使用浮动布局并设置overflow；2. 添加带有padding的辅助元素；3. 通过JavaScript动态设置父元素高度。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现象：子元素用了position，脱离文档流，导致父元素没有高度。

解决方案：

1.把子元素改成浮动布局，给父元素加上overflow属性

overflow:auto;

2.在对应的子元素上，添加相同宽高的兄弟元素，该元素去掉position属性，把定位元素的top值换成margin或padding值。

<div id="box">
    <!--定位元素-->
</div>
<div id="box1">
    <!--后添加的元素-->
</div>

#box{
    height: 400px;
    width: 100%;
    position: absolute;
    top: 50px;
    left: 200px;
    background-color: #0066FF;
}
#box1{
    width: 100%;
    height: 400px;
    padding-top: 50px;
}

3.通过js获取子元素的高，动态给父元素设置高度

var father = document.getElementById('father');
var son = document.getElementById('son'); father.style.height=son.offsetHeight+'px';

总结：如果是自己写的结构建议使用第一种方案，如果是别人写的页面并且页面比较复杂，可以使用第三种，第二种方案仅作为了解。

转载于:https://www.cnblogs.com/bonly-ge/p/9408599.html