在專案中，我們可能經常使得自己設計的網頁能自適應。特別是**中的，經常要求在網頁放大（或縮小）時，寬高同時放大（或縮小），而且不變形（即保持正常的長寬比）。為了不變形，常用的方法就是設定width值，然後高度height設定auto。如果是div，我們該如何處理呢。
背景寬高比固定
下面，我仿照了移動端的聚划算**中（中間一部分的布局。
圖中三個div的寬高都會隨著頁面的大小保持原有比例放大或縮小。其核心思想就是利用padding來拓寬盒子高度。通過padding-top來設定百分比，使其百分比與寬度的百分比為需要的比例。這裡需要注意的是：padding-top中設定的百分比與width中設定的百分比都是以父元素的width為參考的。
div寬高比固定
由於背景能覆蓋包括padding在內的空間，但是如果需要在子元素中放置其他內容，會擴大子元素的高度，這時應該如何處理呢。為了讓其不占用文件流空間，可設定其position：absolute；具體**如下：
1
doctype html
>
2<
html
lang
="en"
>
3<
head
>
4<
meta
charset
="utf-8"
>
5<
title
>高度自適應
title
>
6<
style
>7*
11.main
16.main:after
17.main div
27.main div:nth-child(1)
31.main div:nth-child(2)
35.main div:nth-child(3)
39.p1
51style
>
52head
>
53<
body
>
54<
div
class
="main"
>
55<
div><
p class
="p1"
>圖中三個div的寬高都會隨著頁面的大小保持原有比例放大或縮小。其核心思想就是利用padding來拓寬盒子高度。通過padding-top來設定百分比，使其百分比與寬度的百分比為需要的比例。這裡需要注意的是：padding-top中設定的百分比與width中設定的百分比都是以父元素的width為參考的
p>
div>
56<
div>
div>
57<
div>
div>
58div
>
59body
>
60html
>
更多專業前端知識，請上
【猿2048】www.mk2048.com
CSS實現div高度自適應
1 有時候，我們希望容器有乙個固定高度，但當其中的內容多的時候，又希望高度能夠自適應，也即容器在縱向能被撐開，且如果有背景，也能夠自適應。在一般情況下，使用min height即可解決。但是廣大網民的首選瀏覽器ie6並不支援min height。ie7，opera，火狐，谷歌沒有問題。所以採用以下寫...
CSS 自適應布局
說明 左列固定右列自適應，也可以為右列固定左列自適應，常見於中臺管理介面 移動端web的列表展示等等。固定寬度 自適應 說明 左邊的固定列設定為 float left，右邊的自適應列設定為 float none。css container left right 說明 自適應列的width根據calc...
css實現兩欄自適應布局
前端經典的兩欄布局 1 左側定寬，左浮動 右側寬度100 doctype html 兩欄布局 左側定寬左浮動，右側寬度100 left right 2 使用彈性布局，父元素display flex，左側定寬，右側flex 1，佔滿容器寬度 body left right 3 父元素相對定位，左側定寬...