如果我有以下 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>，我將如何讓每個(gè) div 標(biāo)簽占據(jù)頁面/視口的整個(gè)高度（以便綠色和紅色一直延伸到頁面，即使 div 中的內(nèi)容很少）？
2 回答
UYOU
TA貢獻(xiàn)1878條經(jīng)驗(yàn) 獲得超4個(gè)贊
你有兩種方法可以做到這一點(diǎn)：第一種：要么給每個(gè)div右/左100%高度，但你也必須將container/html/body元素高度設(shè)置為100%，因?yàn)橛液妥骴iv將繼承父級的高度。
第二種方式：將左右分區(qū)的高度設(shè)置為100vh；
例子：
.right{
height:100vh
}
.left{
height:100vh
}
另外，請?jiān)诖颂帣z查..以查看其實(shí)際效果： https://jsfiddle.net/qkxhyobt/
- 2 回答
- 0 關(guān)注
- 204 瀏覽
添加回答
舉報(bào)
0/150
提交
取消