點擊上方藍字關注「小鄭搞碼事」，每天都能學到知識，搞懂一個問題！

說到自適應顯示，寬度好處理一點，將width設個百分比就行了，其實高度要做自適應，甚至按比例顯示也不難，估計大家都這麼處理過。

一句必須知道的話：

上面這張圖是當padding-top設為百分比時在W3C上給出的定義，基於父元素寬度。對的，我們也就是用padding-top來實現高度自適應顯示。

一、DEMO分析：

當高度不確定的情況下，實現一個高度自適應的DIV

HTML結構：

CSS結構：

從上面樣式中可以看到，我將子元素padding-top設置成50%，沒有高度，通過padding值將它撐起來，表現就是父元素60%寬度的一半，通過設置一個紅色背景將它突顯出來。這樣就實現了高度自適應了。

效果圖是這樣的：

但是這種寫最大高度不可控，父元素會隨著屏幕變寬而變大，高度也隨之變高。請往下看......

二、實例應用：

當高度不確定的情況下，實現一個按例如4：3顯示的DIV

利用偽元素來處理，樣式是這樣的：

這樣的話margin-top就是相對div.placeholder來處理的，這樣變化小些就可控一點，75%剛好就是4：3的比例，如果我們div.placeholder里加一張圖片（img），然後將圖片設一個絕對定位，寬度設個100%，高度設個auto，如此一來，是不是和我們平時的某些需求相符了，其中圖片還可以按實際要求去處理。

效果圖是這樣的：

總結：

高度自適應的實現原理就是一句話：padding-top設為百分比時，是相對於父元素的寬度。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！