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

问题描述 投票:0回答:2

如果我有以下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中的内容很少,绿色和红色也会一直延伸到页面的整个底部) ?

html css height
2个回答
1
投票

尝试此


0
投票

您有2种方法可以做到这一点:第一:要么给每个div右/左100%高但您还必须将container / html / body元素的高度设置为100%,因为左右div将继承父级的高度。

© www.soinside.com 2019 - 2024. All rights reserved.