html - 具有可滚动底部 div 的精确高度 div，仅在 CSS 中？

Question

我正在尝试创建一个可滚动的“小部件”。其简化形式如下。

1. 小部件(容器)应具有固定高度，200 像素。
2. 小部件的顶部不应具有固定高度。
3. 小部件的底部应填充剩余高度，任何溢出都应根据需要自动显示滚动条。

我相信这应该只能在 CSS 中实现。然而，我所做的所有谷歌搜索似乎总是对内部运作的某些部分使用固定高度。这不是我所需要的。

我知道这可以用 Javascript 来实现。再说一次，这不是我想要的。

关于如何实现这一目标有什么想法吗？

.container {
  height: 200px;
  max-height: 200px;
  width: 100%;
  overflow: hidden;
}
.top {
  background-color: #aaaaaa;
}
.bottom {
  background-color: #aaaaff;
  overflow: auto;
}

<div class="container">
  <div class="top">
    This content could
    <br/>well vary
  </div>
  <div class="bottom">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia
    animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda
    est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis
    voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </div>

</div>

Answer 1

使用 CSS3 Flexbox 来完成此操作非常简单。

只需将父元素设置为 display: flex 并添加 flex-direction: column 即可。这样做时，滚动条将添加到 .bottom 元素而不是父容器元素。

此外，height: 100% 会添加到 .bottom 元素中，以便在内容不足时填充剩余高度。

.container {
  height: 200px;
  width: 100%;
  display: flex;
  flex-direction: column;
}
.top {
  background-color: #aaaaaa;
}
.bottom {
  background-color: #aaaaff;
  height: 100%;
  overflow: auto;
}

<div class="container">
  <div class="top">
    This content could
    <br/>well vary
  </div>
  <div class="bottom">
    At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia nimi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero tempore, cum soluta nobis est eligendi optio cumque nihil impedit quo minus id quod maxime placeat facere possimus, omnis voluptas assumenda est, omnis dolor repellendus. Temporibus autem quibusdam et aut officiis debitis aut rerum necessitatibus saepe eveniet ut et voluptates repudiandae sint et molestiae non recusandae. Itaque earum rerum hic tenetur a sapiente delectus, ut aut reiciendis voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat voluptatibus maiores alias consequatur aut perferendis doloribus asperiores repellat."
  </div>

</div>