height百分比以及高度自適應問題

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.