現象:子元素用了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';
總結:如果是自己寫的結構建議使用第一種方案,如果是別人寫的頁面並且頁面比較復雜,可以使用第三種,第二種方案僅作為了解。