将 div 设置为 height: 100% 会禁用滚动条

Question

我有以下代码，我想让 2 个 div 标签占据浏览器提供的所有可用高度。

<!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
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
        <div class="right">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
    </div>
</body>
</html>

我决定进行此设置 height:100%，但这会禁用 div 的 dividual 滚动条 - 有谁知道如何使滚动条工作并且让 div 占据浏览器的高度？（我不想硬编码 height: 700px 之类的东西）

Answer 1

我假设 "take up all the available height the browser offers" 你的意思是你希望 div 占据 100% 的视口。这在您的代码中没有发生的原因是您只将 div 的高度设置为 100%。这意味着它们将占据其父元素 .container 的整个高度，但您尚未设置该元素的高度（或其父元素的高度 body，或其父元素的高度, html).您需要设置所有这三个元素的高度。

此外，我会在 body 上明确设置边距。如果不这样做，则在 Firefox、Chrome 和 Edge 中它默认为 8px，但在旧版本或其他浏览器中它可能默认为其他数字。如果您将边距设置为 0，那么对于 html 和 body，您可以将高度设置为 100%。如果您希望 body 的边距为 8px 或其他一些非零数字，那么您需要在 html 和 body 的高度中考虑到这一点。（例如 height: calc(100% - 8px).

<!DOCTYPE html>
<html>
<head>
    <title>test</title>
    <style>
        html, body {
            height: 100%;
        }
        body {
            margin: 0;
        }
        .container {
            display: flex;
            flex-direction: row;
            height: 100%;
        }
        .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
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
        <div class="right">
            Text
            <br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
            Text
        </div>
    </div>
</body>
</html>

将 div 设置为 height: 100% 会禁用滚动条

setting div to height: 100% makes scrollbar disabled

html

css

height

scrollbar

overflow