我使用Grid將容器分成上下兩列:
.box{
display:grid;
height:800px;
grid-template-columns: 1fr;
grid-template-rows: 1fr 1fr;
}
.content{
grid-row:1/2;
grid-column: 1/1;
}
.imgarea{
grid-row:2/3;
grid-column: 1/1;
}
在imgarea內沒有放入圖片的情形下,box被分成2列上下各400px的形式。
但如果這時我在imgarea裡放入圖片並用百分比設定圖片的高度的話,imgarea的高度就會跑版,看起來似乎是它會隨著圖片變大而變大。但我希望imgarea的高度能夠固定不變,不然就會遮蓋到別的元件。請問我應該怎麼做呢? 謝謝。
可以將 .imgarea 加上 overflow: auto;
如此一來 imgarea 的高度就不受圖片影響,圖片高度超過imgarea高度時,imgarea會變成捲軸顯示。