如果我有以下 HTML 代碼：<!DOCTYPE html><html><head> <title>test</title> <style> .container { display: flex; flex-direction: row; } .left { height: 100%; display: block; width: 50%; background-color: green; overflow-y: scroll; } .right { height: 100%; background-color: red; display: block; width: 50%; overflow-y: scroll; } </style></head><body> <div class="container"> <div class="left">Text</div> <div class="right">Text</div> </div></body></html>，我將如何讓每個 div 標簽占據頁面/視口的整個高度（以便綠色和紅色一直延伸到頁面，即使 div 中的內容很少）？
2 回答
UYOU
TA貢獻1878條經驗 獲得超4個贊
你有兩種方法可以做到這一點：第一種：要么給每個div右/左100%高度，但你也必須將container/html/body元素高度設置為100%，因為右和左div將繼承父級的高度。
第二種方式：將左右分區的高度設置為100vh；
例子：
.right{
height:100vh
}
.left{
height:100vh
}
另外，請在此處檢查..以查看其實際效果： https://jsfiddle.net/qkxhyobt/
- 2 回答
- 0 關注
- 186 瀏覽
添加回答
舉報
0/150
提交
取消