溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要講解了“如何解決css高度設置百分比不生效的問題”，文中的講解內容簡單清晰，易于學習與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學習“如何解決css高度設置百分比不生效的問題”吧！
不生效的原因：其父元素沒有確定高度，則無法有效使用“height:XX%”的樣式。解決方法：給父元素使用height屬性設置一個確定的高度，這樣子元素高度設置百分比就可以生效。
本教程操作環境：windows7系統、CSS3&&HTML5版、Dell G3電腦。
當我們給塊級元素設置響應式高度的時候，例如給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%;
}感謝各位的閱讀，以上就是“如何解決css高度設置百分比不生效的問題”的內容了，經過本文的學習后，相信大家對如何解決css高度設置百分比不生效的問題這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關知識點的文章，歡迎關注！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
