使 div 标签占据页面的全长[重复]答案

【问题标题】：making div tags take up full length of the page [duplicate]使 div 标签占据页面的全长[重复]
【发布时间】：2020-04-05 02:30:31
【问题描述】：

如果我在 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 中的内容很少，绿色和红色也会一直延伸到页面） )?

【问题讨论】：

哦，互联网上到处都是解决方案。有一个巨大的线程（向下滚动以查看最新线程）stackoverflow.com/questions/1575141/…

标签： html css height

【解决方案1】：

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

第二种方式：将右/左分区的高度设置为 100vh;

示例：

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

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

【讨论】：

【解决方案2】：

您只需将样式属性 height:100% 更改为 height:100vh。然后它完美地工作。

【讨论】：