时间戳

首页 > 解决方案 > CSS - 确保我的 CSS 网格的前两行等于屏幕的剩余高度（不包括标题）

html - CSS - 确保我的 CSS 网格的前两行等于屏幕的剩余高度（不包括标题）

问题描述

我想知道我的 CSS 网格的前两行是否可以等于不包括标题的屏幕高度。标题下方的内容容器已设置为溢出：自动，但我只希望网格的前两行等于内容容器的高度（不溢出）。我的网格共有 3 行，基本上，我希望前两行占据容器的整个高度而不会溢出，然后第三行对屏幕完全不可见，除非容器向下滚动。如果我的解释令人困惑，请告诉我，因为我是 CSS 网格的新手，并且不太确定我的解释是否足够。谢谢大家，期待你们的回复！

这是我的 HTML 布局示例

<div class='entire'>
    <div class='header'>Header</div>
    <div class='content'>
        <div class='grid'>
            item 1
            item 2
            item 3
        </div>
    </div>
</div>

CSS

.entire {
  height: 100vh;
}

.content {
  overflow: auto;
}

.grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-template-rows: ___ ____ ____;
}

标签： htmlcsscss-grid

解决方案

  1. 的高度.header应该在 CSS 中定义。如果没有 - 它应该由 JS 获得。让我们同意 CSS 中的定义。

  2. 考虑到您对第 1 行和第 2 行的最后评论应该都适合一个屏幕，第 1 行应该采用自动高度和第 2 行 - 所有其余高度，我没有看到任何证据表明将第 3 块包含grid在其中。把它搬走了。

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

.entire {
  height: 100vh;
}

.header {
  background: cyan;
  height: 20px;
}

.content {
  overflow: auto;
}

.grid {
  /* subtracting known height of .header */
  height: calc(100vh - 20px);  
  display: grid;
  grid-template-columns: 1fr;
  /* this will make 1st row auto height and 2nd - all the rest */
  grid-template-rows: auto 1fr; 
}

.item1 {
  background: #eee;
}

.item2 {
  background: #ddd;
}

.item3 {
  background: #ccc;
  height: 100vh;
}
<div class="entire">
  <div class="header">Header</div>
  <div class="content">
    <div class="grid">
      <div class="item1">item 1</div>
      <div class="item2">item 2</div>
    </div>
    <div class="item3">item 3</div>
  </div>
</div>

推荐阅读