子元素定位,父元素高度自適應


現象:子元素用了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';

總結:如果是自己寫的結構建議使用第一種方案,如果是別人寫的頁面並且頁面比較復雜,可以使用第三種,第二種方案僅作為了解。


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM