高度隨寬度適應的響應式方案
阿新 • • 發佈：2018-06-13
right body 記錄 響應 填充 har con 寬度 back
概述
高度隨寬度自適應有很多種方案，這裏只討論一種巧妙的方案，就是利用margin/padding。我把代碼記錄下來供以後開發時參考，相信對其他人也有用。
知識點
margin/padding有這麽一個很巧妙的知識點：當margin/padding取形式為百分比的值時，無論是left/right，還是top/bottom，都是以父元素的width為參照物的！
自適應方案一
那麽可以使用padding-bottom/top來實現自適應方案一，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div { width: 50%; background-color: green; padding-top: 70%; } </style> </head> <body> <div class="div"></div> </body> </html>
然而這個代碼有一個缺點，就是無法設置max-height。原因是它的height是0，它是靠padding撐起來的，但是padding不屬於height。所以我們有如下方案二。
自適應方案二
可以使用margin-bottom/top來實現自適應方案二，代碼如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .div { width: 50%; background-color: green; overflow: hidden; //形成BFC，不影響外面的元素 max-height: 300px; } .div:after { content: ''; display: block; margin-top: 50%; } </style> </head> <body> <div class="div"></div> </body> </html>
可以看到，max-height起了作用。
填充內容
由於沒有規定高度，那麽向其中填充內容勢必會占據一定的空間從而影響高度。所以這個時候一般利用絕對定位來向其中填充內容。
高度隨寬度適應的響應式方案