高度隨寬度適應的響應式方案
阿新 • • 發佈: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起了作用。
填充內容
由於沒有規定高度,那麽向其中填充內容勢必會占據一定的空間從而影響高度。所以這個時候一般利用絕對定位來向其中填充內容。
高度隨寬度適應的響應式方案