純Css實現Div高度根據自適應寬度（百分比）調整

在如今響應式布局的要求下，很多能自動調整尺寸的元素能夠做到高寬自適應，如img，通過實現高度跟隨寬度比例調整。

然而，用的最多的標籤一哥div卻不能做到自動調整（要麼從父級繼承，要麼自行指定px，要麼給百分比！但是這個百分比是根據父級的高度來計算的，根本不是根據元素自身的寬度，那麼就做不到div的寬高達成一定的比例=-=）。

要實現這種功能（div的高度：寬度=1:1），通過各種加buff，得知有以下幾種處理方式

1，直接指定div的寬高+zoom來實現自適應

div這樣能達到初步的等寬高div，但是侷限性太大，pass！

2，通過js動態判斷div的寬度來設定高度

divwindow.onresize = function()

也能實現等寬高div，但是總覺得有點彆扭，pass！

3，通過寬高單位來設定

div但是很多裝置不支援這個屬性，相容性太差，pass！

4，通過float來設定

#aa#bb

#cc父div

子div

就是這個用於clear錯誤的

能夠讓父級元素aa根據子元素的高度自動改變高度（在子元素裡放置自適應元素）來調整高寬比一致，然而太麻煩，pass！

5，終於到最終大殺器了，通過padding來實現此功能

通過以上幾個方案的實驗，發現寬度的自適應是根據viewport的width來調整的，比如就是瀏覽器可視區域的50%，resize之後也會自動調整。

而height指定百分比後，他會自行找到viewport的height來調整，跟width一毛錢關係沒有，自然兩者不能達到比例關係了。通過這個思路，要找到乙個能跟viewport的width扯上裙帶關係的屬性，就能解決這個問題了。

這個屬性就是padding，padding是根據viewport的width來調整的，巧就巧在padding-top和padding-bottom也是根據viewport的width來計算的，那麼通過設定這個屬性就能跟width達成某種比例關係了，

我們首先指定元素的width為父級元素的50%（父級元素為任意有高寬的元素，不能指定特定父級元素，否則影響此方案的通用性）

.father

.element

這個時候我們再設定element的height為0，padding-bottom:50%;

.element

element就變成了乙個寬度50%，高度為0（但是他有50%width的padding-bottom）的正方形了，效果如下圖灰白色的div

這個時候可能有人要問了，這個div的高度為0，那如果我要在element裡放置元素呢，那豈不是overflow了，這裡就要提到overflow屬性了，它的計算是包括div的content和padding的，也就是說，

原來你的div可能是個的div，現在變成的div了，尺寸還是一樣的，通過指定這個div的子元素的定位，一樣可以正常顯示

這樣就可以通過設定父級元素father、我們需要的元素element、子級元素datail來實現任意情況下該需求（div寬高定比例）。

參考：