1.? 你曾經是否說想要 高度占頁面或者占div百分比無效的問題，相信你也搜索過了，就是說 需要 設置父親父親一直到祖宗html都要設置百分比，才有效果。

???? 總之一句話：想用百分比設置他的高度，則它的父親中至少有一個是固定高度，不然的話 全部父親直到祖宗html（因為html外面就是瀏覽器，它是有高度的）都必須設置上百分比。 當然要排除那些脫離文檔流的div,比如position:absolute,fixed，可以認為他們的父級就是瀏覽器，所以height百分比總是有效的，因為瀏覽器的高度是可以直到的啊。

2. 有時候 并不是直接用百分比，可能有部分margin啊，padding啊需要扣除掉，這時候 可以用 height: calc(100% - 1rem); height: calc(50% - 2px); 等等，這種情況有效的條件 也是必須是 第一點說明的，因為它也是用到了height百分比啊。

3. 有時候我們想通過設置百分比， 來維持高寬比例。 我們會想到用 width: 50%; height:50%; 這肯定不對的，因為height是相對容器高度的百分比，而寬是相對容器寬度的百分比。 兩個參照物不一樣，他們的比例不一定是1:1，而始終是外部容器的比例。因此我們的目的很簡單，讓他參照物相同。我們知道padding的參照物就是寬度的。那我們就用padding了。 原理很簡單， 就是用padding-bottom去代替height。 比如博客園的logo我們想作為背景圖，寬高=133/51， 如果我們把背景圖的容器設置寬為50%，那么padding-bottom= 0.5*51/133 = 19.172932330827066% ; 這樣寬高比例就會固定住了。 知道了這個方法，可以做很多事情。

4. 嗯、有些時候還可以考慮用 vh代替。。。

全部效果在這邊，自己研究一下吧：

See the Pen Height百分比 by wenjie (@wenjie) on CodePen.

?

總結

以上是生活随笔為你收集整理的height百分比以及高度自适应问题的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。