這篇文章將為大家詳細(xì)講解有關(guān)純Css如何實現(xiàn)Div高度根據(jù)自適應(yīng)寬度調(diào)整，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

五峰網(wǎng)站建設(shè)公司創(chuàng)新互聯(lián)公司,五峰網(wǎng)站設(shè)計制作，有大型網(wǎng)站制作公司豐富經(jīng)驗。已為五峰成百上千提供企業(yè)網(wǎng)站建設(shè)服務(wù)。企業(yè)網(wǎng)站搭建\成都外貿(mào)網(wǎng)站建設(shè)要多少錢，請找那個售后服務(wù)好的五峰做網(wǎng)站的公司定做！

在如今響應(yīng)式布局的要求下，很多能自動調(diào)整尺寸的元素能夠做到高寬自適應(yīng)，如img，通過{width:50%;height:auto;}實現(xiàn)圖片高度跟隨寬度比例調(diào)整。

然而，用的最多的標(biāo)簽一哥Div卻不能做到自動調(diào)整（要么從父級繼承，要么自行指定px，要么給百分比！但是這個百分比是根據(jù)父級的高度來計算的，根本不是根據(jù)元素自身的寬度，那么就做不到Div的寬高達(dá)成一定的比例=-=）。

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

1，直接指定div的寬高+zoom來實現(xiàn)自適應(yīng)

div{width:50px;heigth:50px;zoom:1.1;}

這樣能達(dá)到初步的等寬高div，但是局限性太大，PASS！

2，通過js動態(tài)判斷div的寬度來設(shè)置高度

div{width:50%;}

window.onresize = function(){div.height(div.width);}

也能實現(xiàn)等寬高div，但是總覺得有點別扭，PASS！

3，通過寬高單位來設(shè)置

div{width:20vw;height:20vw;/*20vw為viewport width的20%*/}

但是很多設(shè)備不支持這個屬性，兼容性太差，PASS！

4，通過float來設(shè)置

#aa{background:#aaa;;}
#bb{background:#ddd;;float:left}
#cc{background:#eee;;float:right}

<div id="aa">父div
　　<div id="bb">子div</div>
　　<div id="cc">子div</div>
　　<div style="clear:both">就是這個用于clear錯誤的</div>
</div>

能夠讓父級元素aa根據(jù)子元素的高度自動改變高度（在子元素里放置自適應(yīng)元素）來調(diào)整高寬比一致，然而太麻煩，PASS！

5，終于到最終大殺器了，通過padding來實現(xiàn)此功能

通過以上幾個方案的實驗，發(fā)現(xiàn)寬度的自適應(yīng)是根據(jù)viewport的width來調(diào)整的，比如{width：50%}就是瀏覽器可視區(qū)域的50%，resize之后也會自動調(diào)整。

而height指定百分比后，他會自行找到viewport的height來調(diào)整，跟width一毛錢關(guān)系沒有，自然兩者不能達(dá)到比例關(guān)系了。通過這個思路，要找到一個能跟viewport的width扯上裙帶關(guān)系的屬性，就能解決這個問題了。

這個屬性就是padding，padding是根據(jù)viewport的width來調(diào)整的，巧就巧在padding-top和padding-bottom也是根據(jù)viewport的width來計算的，那么通過設(shè)置這個屬性就能跟width達(dá)成某種比例關(guān)系了，

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

.father{width:100px;height:100px;background:#222}

.element{width:50%;background:#eee;}

這個時候我們再設(shè)置element的height為0，padding-bottom:50%;

.element{width:50%;height:0;padding-bottom:50%;background:#eee;}

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

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

原來你的div可能是個{width：50px;height:50px;padding:0}的div，現(xiàn)在變成{width:50px;height:0;padding-bottom:50px;}的div了，尺寸還是一樣的，通過指定這個div的子元素的定位，一樣可以正常顯示

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

關(guān)于“純Css如何實現(xiàn)Div高度根據(jù)自適應(yīng)寬度調(diào)整”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學(xué)到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

標(biāo)題名稱：純Css如何實現(xiàn)Div高度根據(jù)自適應(yīng)寬度調(diào)整
分享網(wǎng)址：http://aaarwkj.com/article44/jposhe.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站內(nèi)鏈、網(wǎng)站導(dǎo)航、響應(yīng)式網(wǎng)站、微信公眾號、網(wǎng)站營銷、靜態(tài)網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)