在CSS网格行上强制最大高度

fkvaft9z 于 2023-02-01 发布在其他

关注(0)|答案(3)|浏览(104)

我有一个2行的简单网格：一个作为标题，另一个是项目列表。2我希望我的网格有一个最大高度，我希望能够滚动我的项目列表。
Link to the codepen

<div class="grid">
  <div class="two">
    Two
  </div>
  <div class="three">
    <div class="body">
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
    </div>
  </div>
</div>

.grid {
  display: grid;
  grid-template-rows: 50px min-content;
  max-height: 300px;
  background: blue;
  overflow-y: hidden;
}

.two {
  background: green;
}

.three {
  background: #00000044;
  max-height: 400px;
}

.body {
  max-width: 400px;
  background: orange;
  margin: auto;
  max-height: 100%;
  overflow-y: scroll;
}

我的. grid项目有一个最大高度，但是如果我的列表中有更多的项目，整个网格会扩展。有没有办法确保我的最大高度被考虑进去？

css

来源：https://stackoverflow.com/questions/75247656/force-max-height-on-a-css-grid-row

3条答案

按热度按时间

vc6uscn91#

如果您只想滚动项目列表并将标题保持在相同位置，则可以使用position: sticky，更新示例：

.grid {
  display: grid;
  grid-template-rows: 50px min-content;
  max-height: 300px;
  background: blue;
  overflow-y: auto;
}

.two {
  background: green;
  position: sticky;
  top: 0;
}

.three {
  background: #00000044;
}

.body {
  max-width: 400px;
  background: orange;
  margin: auto;
  max-height: 100%;
  overflow-y: scroll;
}

<div class="grid">
  <div class="two">
    Two
  </div>
  <div class="three">
    <div class="body">
      <p>Section first</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section</p>
      <p>Section last</p>
    </div>
  </div>
</div>

赞(0）回复(0）举报 2023-02-01

eaf3rand2#

而不是使用自动隐藏溢出
代码：

.grid {
        display: grid;
        grid-template-rows: 50px min-content;
        max-height: 300px;
        background: blue;
        overflow-y: hidden;
       }

 .two {
        background: green;
      }

 .three {
        background: #00000044;
        max-height: 400px;
      }

 .body {
        max-width: 400px;
        background: orange;
        margin: auto;
        max-height: 100%;
        overflow-y: auto;
       }

赞(0）回复(0）举报 2023-02-01

uklbhaso3#

有什么原因不能在.grid和.body上都将最大高度设置为300px吗？