Css 网格自动调整大小的行内容溢出

Question

我在实施嵌套网格结构时遇到了问题。这是一个简化的例子。如您所见，嵌套结构为外部结构提供了高度，因此在 body 之外增长。我想要实现的是使 .content__inner 元素和仅该元素可滚动。其他一切都应该在视口内。我怎样才能做到这一点？

编辑 1： 澄清一下，我在 body 上使用 100vh，但不想在容器上设置它。容器应该有其 parent 的高度，无论它是什么。

body {
  display: block;
  height: 100vh;
  width: 100%;
  background-color: white;
  margin: 0;
}

.container {
  max-height: 100%;
  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: min-content minmax(min-content, max-content) min-content;
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.3);
}

.side {
  grid-area: side;
  background-color: rgba(0, 255, 0, 0.3);
}

.content {
  grid-area: content;
  background-color: rgba(0, 0, 255, 0.3);
}

.overflow {
  overflow: auto;
}

.content-item {
  height: 20px;
  margin-bottom: 5px;
  background-color: white;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 0, 255, 0.3);
}

<div class="container">
  <div class="header">header</div>
  <div class="side">side</div>
  <div class="content">

    <div class="container container__inner">
      <div class="header header__inner">header</div>
      <div class="side side__inner">side</div>
      <div class="content content__inner overflow">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <div class="footer footer__inner">footer</div>
    </div>

  </div>
  <div class="footer">footer</div>
</div>

Answer 1

我认为这就是您希望它可滚动的意思，这是我的解决方案，

我将 max-height 更改为 100vh，这会将 .container class 的高度固定为屏幕高度

我添加了 overflow: scroll 以使任何内容超过 class .container 高度可滚动

.container {
  max-height: 100vh;
  overflow: scroll;


  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: min-content minmax(min-content, max-content) min-content;
}

Answer 2

你需要从 100vh 的布局中维护 space 页眉和页脚，而不是你的 .content__inner 适合 100vh...让我加一个来解释你行到您的代码。 edited code

我已将以下代码添加到您的代码中

.content__inner { max-height: calc(100vh - 96px); /* added max height */ }

因此容器具有其父级的高度，无论如何，它永远不会超出我们的 100vh 并根据您的滚动要求进行修复

Answer 3

您的 HTML 文件：

<div class="container">
  <div class="header">header</div>
  <div class="side">side</div>
  <div class="content">

    <div class="container container__inner">
      <div class="header header__inner">header</div>
      <div class="side side__inner">side</div>
      <div class="content-mod">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <div class="footer footer__inner">footer</div>
    </div>

  </div>
  <div class="footer">footer</div>
</div>

您的 Css 文件：

body {
  display: block;
  height: 100vh;
  width: 100%;
  background-color: white;
  margin: 0;
  overflow: hidden;
}

.container {
  max-height: 100%;
  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: min-content minmax(min-content, max-content) min-content;
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.3);
}

.side {
  grid-area: side;
  background-color: rgba(0, 255, 0, 0.3);
}

.content {
  grid-area: content;
  background-color: rgba(0, 0, 255, 0.3);
  overflow: auto;
  height: calc(100vh - 74px);
}

.overflow {
  overflow: auto;
}

.content-item {
  height: 20px;
  margin-bottom: 5px;
  background-color: white;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 0, 255, 0.3);
}

我希望这对你有用。 :))

Answer 4

问题很容易描述，但可能没有简单的解决方案（取决于您的要求）。

问题其实看标题就很清楚了：

Css grid auto sized row content with overflow

Auto-sized个元素不能溢出。它们 自动调整大小 。这意味着元素根据其内容大小收缩和扩展，永远不需要溢出。

必须有一些东西可以在容器上设置固定长度。可以跨越的边界，从而触发溢出条件。

来自 MDN:*

In order for overflow to have an effect, the block-level container must have either a set height (height or max-height) or white-space set to nowrap.

您的行高不足以触发溢出：

grid-template-rows: min-content minmax(min-content, max-content) min-content

但是像这样的东西会起作用：

  grid-template-rows: 10% 80% 10%

不幸的是，上面的代码只适用于 Chrome。要使布局也适用于 Firefox 和 Edge，请执行以下操作：

  grid-template-rows: 10% minmax(0, 80%) 10%

body {
  display: block;
  height: 100vh;
  width: 100%;
  background-color: white;
  margin: 0;
}

.container {
  max-height: 100%;
  display: grid;
  grid-template-areas: "header header" "side content" "footer footer";
  grid-template-columns: 50px auto;
  grid-template-rows: 10% minmax(0, 80%) 10%; /* adjustment */
}

.header {
  grid-area: header;
  background-color: rgba(255, 255, 0, 0.3);
}

.side {
  grid-area: side;
  background-color: rgba(0, 255, 0, 0.3);
}

.content {
  grid-area: content;
  background-color: rgba(0, 0, 255, 0.3);
}

.overflow {
  overflow: auto;
}

.content-item {
  height: 20px;
  margin-bottom: 5px;
  background-color: white;
}

.footer {
  grid-area: footer;
  background-color: rgba(255, 0, 255, 0.3);
}

<div class="container">
  <div class="header">header</div>
  <div class="side">side</div>
  <div class="content">
    <div class="container container__inner">
      <div class="header header__inner">header</div>
      <div class="side side__inner">side</div>
      <div class="content content__inner overflow">
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
        <div class="content-item"></div>
      </div>
      <div class="footer footer__inner">footer</div>
    </div>
  </div>
  <div class="footer">footer</div>
</div>

基本上，您需要找到一些方法来设置溢出行的固定高度限制，以便滚动条发挥作用。

有关上述浏览器差异的解释，请参阅以下帖子：

Css 网格自动调整大小的行内容溢出

Css grid auto sized row content with overflow

html

css

overflow

css-grid