网格布局 - 滚动时固定行和列答案

【问题标题】：Grid layout - fixed row and columns when scrolling网格布局 - 滚动时固定行和列
【发布时间】：2020-11-06 00:23:43
【问题描述】：

我在我的项目中使用 CSS Grid。我有布局，其中有多个带有标题的列。左侧还有一个“侧边栏”。

在这里你可以在 jsfiddle 上看到我的代码和非常基本的配置：

.c {
  height: calc(100vh - 3rem);
}

.container {
  align-self: start;
  display: grid;
  grid-template-columns: auto;
  grid-template-rows: auto 1fr;
  overflow: auto;
  height: 100%;
}

.header {
  display: grid;
  grid-template-columns: 6rem auto 20px;
  grid-template-rows: auto;
}

.mails {
  grid-column-start: 2;
  grid-column-end: -2;
  display: grid;
  grid-template-columns: 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

.content {
  overflow: auto;
  display: grid;
  grid-template-columns: 6rem 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

.time-slots {
  display: grid;
  grid-template-columns: 3rem 3rem;
  grid-template-rows: auto;
}

.data {
  position: relative;
  display: grid;
  grid-template-columns: 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

<div class="c">
  <div class="container">
    <div class="header">
      <div class="mails">
        <div style="border: solid 1px orange">
          <div>h1</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h2</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h3</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h4</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h5</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h6</div>
        </div>
        <div style="border: solid 1px orange">
          <div>h7</div>
        </div>
      </div>
    </div>
    <div class="content">
      <div class="time-slots">
        <div style="border: solid 1px green; height: 1500px">
          s1
        </div>
        <div style="border: solid 1px red; height: 1500px">
          s2
        </div>
      </div>
      <div class="data">
        <div style="border: solid 1px blue; height: 1500px">d1</div>
        <div style="border: solid 1px blue; height: 1500px">d2</div>
        <div style="border: solid 1px blue; height: 1500px">d3</div>
        <div style="border: solid 1px blue; height: 1500px">d4</div>
        <div style="border: solid 1px blue; height: 1500px">d5</div>
        <div style="border: solid 1px blue; height: 1500px">d6</div>
        <div style="border: solid 1px blue; height: 1500px">d7</div>
      </div>
    </div>
  </div>
</div>

JSFiddle https://jsfiddle.net/ut5pc9ne/5/

我需要做的是在向下滚动时使用静态标题（这已经完成）。但我也希望在水平滚动时拥有静态的前两列（例如 s1 和 s2 文本）。

有没有办法做到这一点？我的第二个问题是是否可以看到垂直滚动条？因为现在我必须向右滚动水平滚动条，十个我可以看到垂直滚动条。是否可以让此滚动条始终显示在右侧？

【问题讨论】：

标签： html css css-grid

【解决方案1】：

对于初学者，我会熟悉网格项的自动最小尺寸。

这些设置 - min-width: auto 和 min-height: auto - 会干扰您将滚动轨道限制在指定区域的能力。

将此添加到您的代码中以进行实验：* { min-width: 0; min-height: 0; }

请看这里：Prevent content from expanding grid items

我还建议您检查grid-template-columns 和grid-template-rows 的设置。

例如，你有这个：

.content {
  overflow: auto;
  display: grid;
  grid-template-columns: 6rem 350px 350px 350px 350px 350px 350px 350px;
  grid-template-rows: auto;
}

但是.content 元素只有两个子元素：

<div class="content">
  <div class="time-slots"></div>
  <div class="data"><div>
</div>

所以grid-template-columns 应该只有两个值。像这样的：

.content {
  overflow: auto;
  display: grid;
  grid-template-columns: 6rem 1fr; /* adjusted */;
  grid-template-rows: auto;
}

网格属性仅在父元素和子元素之间应用。不要期望继承孩子以外的东西。

请看这里：Grid properties not working on elements inside grid container

【讨论】：