Question

当内容溢出时，我需要使div可滚动。问题在于，出于布局原因，div是display: table/table-row系统的一部分。

当内容超出高度时，底部侧边栏容器需要允许滚动。我遇到的问题是 - 使用这种类型的布局 - CSS无法将下部div锁定到其父级（.holder）的动态确定高度。它要么是一个％高度，要么只是其父级的高度的100％。

我的目标是使用纯CSS来解决这个问题，这样我们可以避免在更改侧边栏元素的高度时运行javascript。

.wrapper-page { position: absolute; top: 38px; bottom: 10px; left: 10px; right: 10px; overflow: hidden; }
.sidebar { width: 25%; height: 100%; }

.holder { width: 100%; height: 100%; display: table; table-layout: fixed }
.holder > div:first-child { height: 25%; max-height: 25%; }
.holder > div { display: table-row; table-layout: fixed  }

由于这种布局，如果我们使用sidebar，只有overflow-y: scroll会正确滚动 - 但滚动整个侧边栏。 .holder > div:last-child应滚动。

<div class="wrapper-page">
    <div class="sidebar">
        <div class="holder">
            <div>
                box one<br>
            </div>
            <div>
                box two<br>
            </div>
        </div>
    </div>
</div>

Answer 1

我在本地使用：

div {
  outline: 1px solid blue;
}
.wrapper-page {
  position: absolute;
  top: 38px;
  bottom: 10px;
  left: 10px;
  right: 10px;
  overflow: hidden;
}
.sidebar {
  width: 25%;
  height: 100%
}
.holder {
  width: 100%;
  overflow: hidden;
}
.holder > div {
  overflow-y: scroll;
}
.holder > div:first-child {
  height: 25%;
}
.holder > div:last-child {
  height: 75%;
}

我尝试回到CodePen但它在虚拟环境中不起作用。但它确实可以在平面HTML文件中使用。遗憾的是，我无法知道这是否适合您，除了将其作为可能的答案发布给您进行审核。

说明：这里需要注意的是表结构本身。您必须使用剩余的高度尺寸。这似乎是权衡利弊; no-JS需要显式的CSS，与JS一样，你可以更灵活地使用CSS。

此外，您可以在包装页面上使用另一个类，以便您可以隐藏上面板并展开下面的面板，如下所示：

.wrapper-page.hide-upper .holder > div:first-child { display: none !important; }
.wrapper-page.hide-upper .holder > div:last-child { height: 100% !important; }

它可能不是你正在寻找的100％，但根据你对你想要实现的目标的描述，听起来它会做同样的事情。

限制显示：高度为动态时的表格行/单元格高度

1 个答案: