带有可滚动列表的其他全高容器内的 CSS 全高容器答案

【问题标题】：CSS Full height container inside other full height container with scrollable list带有可滚动列表的其他全高容器内的 CSS 全高容器
【发布时间】：2023-01-27 23:01:16
【问题描述】：

我想实现以下目标：该页面有一个标题，然后是一个占据剩余垂直空间的内容容器。在内容容器内是另一个标题和内容容器，它也应该填充剩余的高度。内部内容容器的内容可能超过高度，在这种情况下它应该垂直滚动。

我试图用 flexbox 实现这一点，但由于某种原因，长列表溢出并且不滚动。我通过在 .content 容器上设置 overflow-y: auto 来关闭，但是内部标题也会滚动，这不是我想要的。我只想滚动 .inner-content 容器的内容。

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: lightgoldenrodyellow;
}

.header {
  background-color: black;
  flex: 0 1 auto;
  color: white;
}

.content {
  flex: 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 800px;
  padding: 1rem;
  margin: 1rem auto;
}

.heading {
  flex: 0 1 auto;
}

.inner-content {
  flex: 1;
  display: flex;
}

.scrollable-content {
  overflow-y: auto;
  width: 200px;
  flex-shrink: 0;
}

.scrollable-content ul {
  margin: 0;
  padding: 0;
}

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="header">
    <h1>Foo bar baz</h1>
    <p>Lorem ipsum</p>
  </div>
  <div class="content">
    <h2 class="heading">Lorem Ipsum</h2>
    <div class="inner-content">
      <div class="scrollable-content">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
      <div class="preview">
        <img src="https://images.unsplash.com/photo-1574001412492-7555e61a9b53?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />
      </div>
    </div>
  </div>
</div>

【问题讨论】：

.scrollable-content add height or max, min height 然后它会滚动
正如 nisha 所说，如果你想滚动，你需要有一个高度。这里的问题是您只有容器的高度为 100vh，其他任何 div 都没有。使用 flex 显示，inner-content 中的元素将拉伸其高度。您可以使用网格而不是 flex，外部的简单网格（2 行，1 列），以及第 2 行内的另一个（嵌套的）简单网格。网格是 2 个维度，仅 flex 1
感谢您的见解，不幸的是我不想设置一个明确的高度，而是让它取决于屏幕高度（这就是为什么外部元素上有 100vh 的原因）。 @pierfarrugia 使用网格似乎不起作用：xogkz3.csb.app

标签： css flexbox

【解决方案1】：

你有 100vh 但它用于外部容器。

可滚动内容在结构中有 5 个层次。你能为页眉设置高度吗？内部元素至少有 1 个高度可以工作。

在 sn-p 中，我输入：

标题高度为 100px（在 css var 中，但也可以用作 100px）
内容高度是 100vh - 100px：我们有内容的“真实”高度 -inner-content height is: calc 100% (content height) minus 2.5rem: h2 is 2rem with a bottom margin 0.5rem
可滚动内容的最大高度为 100%，并带有 overflow-y auto

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  padding: 0;
}

 :root {
  --header-height: 100px;
}

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: lightgoldenrodyellow;
}

.header {
  background-color: black;
  flex: 0 1 auto;
  color: white;
}

.content {
  flex: 1;
  background-color: white;
  display: flex;
  flex-direction: column;
  width: 800px;
  height: calc(100vh - var(--header-height));
  padding: 1rem;
  margin: 1rem auto;
}

.heading {
  flex: 0 1 auto;
}

.inner-content {
  flex: 1;
  display: flex;
  max-height: calc(100% - 2.5rem);
}

.scrollable-content {
  width: 200px;
  flex-shrink: 0;
  overflow-y: auto;
  max-height: 100%;
}

.scrollable-content ul {
  margin: 0;
  padding: 0;
}

.preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

<div class="container">
  <div class="header">
    <h1>Foo bar baz</h1>
    <p>Lorem ipsum</p>
  </div>
  <div class="content">
    <h2 class="heading">Lorem Ipsum</h2>
    <div class="inner-content">
      <div class="scrollable-content">
        <ul>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
          <li>List item</li>
        </ul>
      </div>
      <div class="preview">
        <img src="https://images.unsplash.com/photo-1574001412492-7555e61a9b53?ixlib=rb-4.0.3&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80" />
      </div>
    </div>
  </div>
</div>

【讨论】：