如果我有以下 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/
添加回答
举报
0/150
提交
取消