Question

我在项目中使用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文本）。

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

Answer 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

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

1 个答案: