使 div 标签占据页面的整个长度
如果我有以下 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 中的内容很少）？
繁花如伊浏览 76回答 2
2回答
-
UYOU
你有两种方法可以做到这一点：第一种：要么给每个div右/左100%高度，但你也必须将container/html/body元素高度设置为100%，因为右和左div将继承父级的高度。第二种方式：将左右分区的高度设置为100vh；例子：.right{height:100vh}.left{height:100vh}另外，请在此处检查..以查看其实际效果： https://jsfiddle.net/qkxhyobt/ -
万千封印
您只需将样式属性更改height:100%为height:100vh. 然后它就完美地工作了。
随时随地看视频慕课网APP
相关分类
Html5