子元素定位，父元素高度自适应

现象：子元素用了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