时间戳

首页 > 解决方案 > 可滚动的 flex 列将文档高度推到 100% 以上，导致 2 个滚动条

html - 可滚动的 flex 列将文档高度推到 100% 以上，导致 2 个滚动条

问题描述

我有一个 2 行的 flexbox。在第二行中，我有一个包含 2 列的 flexbox，当内容溢出时，第二列变为可滚动的。但是，当它变得可滚动时，文档也变得可滚动（一点点 - 就像第一行的高度被添加到文档的高度一样）。

我已经为所有父母设置了 100% 的高度并进行了很多调试，但无法解决这个问题。我看不出出了什么问题。

我在这个 Js Bin 中复制了这个问题：https ://jsbin.com/lesoledoqo/1/edit?html,output

有任何想法吗？

代码：

<html style="height: 100%;">

<body style="height: 100%; padding: 0; margin: 0;">
   <div style="display: flex; flex-direction: column; height: 100%;">
      <div style=" background-color: gray">
         Content 1
      </div>
      <div style="display: flex; background-color: green; height: 100%;">
         <div style="background-color: blue;">
            Content 2.1
         </div>
         <div style="background-color: yellow; height: 100%; overflow-y: auto;">
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                        Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                        Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                        Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
                       Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2<br />
            Content 2.2
         </div>
      </div>
   </div>
</body>

</html>

标签： htmlcssflexbox

解决方案

代码及其行为没有任何问题，它按编码工作。

如果您只想在第二行的列上而不是在整个文档上使用滚动条，那么这样做 -

  1. 给第一行一些固定的高度，比如说 40px
  2. 然后使用 CSS 的 calc() 方法为第二行提供 100vh - 40px 的高度。

vh - 视图高度

在这里演示

height: calc(100vh - 40px);

推荐阅读