使 div 标签占据整个页面的长度

Question

如果我在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 标签占据 page/viewport 的整个高度（这样绿色和红色甚至会一直向下延伸到页面如果 divs)?

中的内容很少

Answer 1

您有两种方法可以做到这一点：第一的：给每个 div right/left 100% 高度但是您还必须将 container/html/body 元素的高度也设置为 100%，因为左右 div 将继承父元素的高度。

第二种方式：将 right/left divisions 的高度设置为 100vh;

示例：

.right{
height:100vh
}
.left{
height:100vh
}

此外，请在此处查看 .. 以查看实际效果： https://jsfiddle.net/qkxhyobt/

Answer 2

您只需将样式属性 height:100% 更改为 height:100vh。然后完美运行。

使 div 标签占据整个页面的长度

making div tags take up full length of the page

html

css

height