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

【问题标题】：setting div to height: 100% makes scrollbar disabled将 div 设置为 height: 100% 禁用滚动条
【发布时间】：2020-07-09 13:26:51
【问题描述】：

我有以下代码，我想让 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 的各个滚动条 - 有谁知道如何使滚动条工作并让 div 占据浏览器的高度？（我不想硬编码像 height: 700px 这样的东西）

【问题讨论】：

标签： html css height scrollbar overflow

【解决方案1】：

我假设“占用浏览器提供的所有可用高度”是指您希望 divs 占用 100% 的视口。在您的代码中没有发生这种情况的原因是您只将divs 的高度设置为 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 标签的普通滚动条？
我不确定我是否理解。您是否希望在单个 div 上有滚动条并在整个文档上有滚动条？还是只想在文档上有一个滚动条？
单个 div 上的滚动条和整个文档上的滚动条
这似乎是相互排斥的，不是吗？如果您可以使用普通滚动条滚动两个 div，那么为什么单个 div 也需要滚动条？我一定不明白你在找什么。请尽量清楚准确地解释。
我不相信纯 CSS 可以做到这一点。这根本不是滚动条的默认行为。我并不是说这是不可能的，但它可能需要一些 JavaScript。 This answer 可能是一个很好的起点。