如何解決css高度設(shè)置百分比不生效的問題

這篇文章主要講解了“如何解決css高度設(shè)置百分比不生效的問題”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“如何解決css高度設(shè)置百分比不生效的問題”吧！

不生效的原因：其父元素沒有確定高度，則無法有效使用“height:XX%”的樣式。解決方法：給父元素使用height屬性設(shè)置一個確定的高度，這樣子元素高度設(shè)置百分比就可以生效。

本教程操作環(huán)境：windows7系統(tǒng)、CSS3&&HTML5版、Dell G3電腦。

當(dāng)我們給塊級元素設(shè)置響應(yīng)式高度的時候，例如給div設(shè)置height:50%，往往沒能看到效果。

原因是百分比的大小是相對其父級元素寬高的大小，如最外層元素設(shè)置的百分比是對應(yīng)屏幕而言的。

需要了解的是對于寬度來說，其父級元素?zé)o須確定寬度就能設(shè)置百分比

但高度則不同，若某元素的父元素沒有確定高度，則無法有效使用height:XX%的樣式?。?！

看完上面一段話，我嘗試加body{heigh：100%}，然而并沒有什么鳥用…………

讓我們仔細想一想~~~，body的父級元素的高度定下來了麼？？？？？？并沒有啊~~所以還是沒有效果

所以我們還要對html元素設(shè)置高度！！或者在*{}中設(shè)置高度百分比

代碼如下

*{
	margin:0px;
	padding: 0px;
}
html,body{
	margin: 0px;
	background:url(../img/body_bg.jpg) no-repeat 0 0;
	width:100%;
	height:100%;
}
.nav{
	width:100%;
	height:20%;
	border: 1px solid red;
}
.nav>img{
	width:100%;
	height: 100%;
}

感謝各位的閱讀，以上就是“如何解決css高度設(shè)置百分比不生效的問題”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對如何解決css高度設(shè)置百分比不生效的問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！