用偽類實現一個div的寬度和高度是固定百分比

桔子_Lynn發表於2017-04-18

遇到一個題目：一個div寬度是固定百分比的情況下，如何設定高度是寬度的80%

看到題目的第一反應是用js控制，獲取到div的寬度之後再用寬度的80%來設定div的高度，但是如何在不用js的情況下，只用CSS來實現呢

下面是示例程式碼：

HTML程式碼：

<div class="outer"></div>

CSS程式碼：

.outer{
    width: 30%;
    background: #eee;
}
.outer:after{
    content: '';
    display: block;
    padding-top: 80%;
}

效果如圖：

上圖中，寬度是高度的80%，那麼實現原理是什麼呢？

因為div的寬度是30%而沒有設定高度，當設定div的偽類padding-top是80%時，本該以高度為標準的，但是沒有高度便會預設以寬度為標準，

偽類的padding-top設定成80%便會把父元素撐開，此時div就算沒有設定高度也會被撐開，並且高度是寬度的80%；

那麼想實現一個響應式的正方形就容易多了，只要設定div的偽類padding-top是100%即可，這樣div將一直是一個正方形

最後總結一下：padding-top & padding-bottom 這兩個css屬性，父節點沒有固定高度，他們就會參照父節點的寬度來設定自己的百分比；

（組內大神總結出來的解決辦法，by新手小白的記錄）

 

相關文章