1. 程式人生 > >css中高度設定百分比但是沒有效果

css中高度設定百分比但是沒有效果

當我們給塊級元素設定響應式高度的時候,例如給div設定height=50%,往往沒能看到效果。 

原因是百分比的大小是相對其父級元素寬高的大小,如最外層元素設定的百分比是對應螢幕而言的。 

需要了解的是對於寬度來說,其父級元素無須確定寬度就能設定百分比

但高度則不同,若某元素的父元素沒有確定高度,則無法有效使用height=XX%的樣式!!!

看完上面一段話,我嘗試加body{heigh:100%},然而並沒有什麼鳥用…………

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

所以我們還要對html元素設定高度!!或者在*{}中設定高度百分比

程式碼如下

*{
	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%;
}