1.? 你曾經(jīng)是否說(shuō)想要 高度占頁(yè)面或者占div百分比無(wú)效的問(wèn)題，相信你也搜索過(guò)了，就是說(shuō) 需要 設(shè)置父親父親一直到祖宗html都要設(shè)置百分比，才有效果。

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

2. 有時(shí)候 并不是直接用百分比，可能有部分margin啊，padding啊需要扣除掉，這時(shí)候 可以用 height: calc(100% - 1rem); height: calc(50% - 2px); 等等，這種情況有效的條件 也是必須是 第一點(diǎn)說(shuō)明的，因?yàn)樗彩怯玫搅薶eight百分比啊。

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

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

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

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

?

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。