如何使用 CSS 网格布局在 CSS 中制作固定列？

Question

我用 #container div 创建了一个简单的网站，它是两个 div 的父级： #left 和 #right ，通过使用 网格布局

有什么办法可以固定左栏吗？我希望左边的文本保留在其位置上，而右边的文本可以像现在一样滚动。将 position: fixed 添加到 #left 会破坏布局。

我知道这个问题已经解决了，但我希望有一种方法可以让它与网格布局一起工作。

谢谢。

 body {
  margin: 0 0 0 0;
}

#container {
  display: grid;
  grid-template-columns: 50% 50%;
}

.section {
  padding: 5% 5% 5% 5%;
}

#left {
  background-color: aquamarine;
}

#right {
  background-color: beige;
}

 <div id="container">
  <div id="left" class="section">
    <p>This should not scroll</p>
  </div>
  <div id="right" class="section">
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut
      tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
    </p>
    <p>
      Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit
      mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
    </p>
    <p>
      In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit
      neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum
      dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
    </p>
  </div>
</div>

原文由 MeLlamoPablo 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你写了：

有什么办法可以固定左栏吗？

我希望有一种方法可以使其与网格布局一起使用。

如果您希望该元素保留为网格项，那么答案是“否”。

一旦元素具有 position: absolute 或 position: fixed （ 这是一种绝对定位的形式，参考视口），它就会呈现出新的特征：

• 该元素已从文档流中删除
• 该元素已从 网格格式化上下文 中删除
• 该元素不再是网格项

从规格：

10.绝对定位

网格容器的绝对定位子项是流外的，而不是网格项，因此不会影响其他项的放置或网格的大小。

所以 网格项目 不能很好地与绝对定位一起工作。

但是，将 position: fixed 应用于 网格容器 不会有问题。

考虑单独管理您的 #left 和 #right 元素。 #left 可以是固定位置的网格容器。 #right 可以是另一个网格容器并保持流入。

---

另外，顺便说一句，您已经为网格项目提供了基于百分比的填充：

 .section {
    padding: 5% 5% 5% 5%;
}

将 margin 和 padding 应用于网格项目（和弹性项目）时，最好远离百分比单位。浏览器可能会以不同方式计算这些值。

• 在 Firefox 中忽略网格项目的百分比填充
• 为什么百分比填充对 Firefox 中的 flex 项目不起作用？

原文由 Michael Benjamin 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

您可以通过将这些 CSS 规则添加到您的 id #left 来实现此目的：

 position: sticky; // See link
top: 0; //to make it stick to the top of the screen
height: 100vh; // make the height equal to 100 view height

粘性位置链接： 粘性位置只有 CSS

sticky 是 position 属性的新值，作为 CSS3 布局模块规范的一部分添加。它的作用类似于相对定位，因为它不会从文档流中删除任何内容。换句话说，粘性元素对相邻元素的位置没有影响，也不会折叠其父元素。

希望对你有帮助

编辑（修复跳跃行为）

为了避免左侧部分跳到页面末尾，只需将以下CSS规则添加到您的id#left：

 box-sizing: border-box;

查看更新的代码片段：

 body {
    margin: 0 0 0 0;
}

#container {
    display: grid;
    grid-template-columns: 50% 50%;
}

.section {
    padding: 5% 5% 5% 5%;
}

#left {
    background-color: aquamarine;
    position: sticky;
    top: 0;
    height: 100vh;
    box-sizing: border-box;
}

#right {
    background-color: beige;
}

 <div id="container">
    <div id="left" class="section">
        <p>This should not scroll</p>
    </div>
    <div id="right" class="section">
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet consectetur purus nec volutpat. Donec vel libero nec est commodo facilisis vel et nisl. Praesent porta sed eros eu porta. Cras dolor nulla, ullamcorper et tincidunt quis, porta ut tellus. Maecenas cursus libero sed accumsan luctus. Integer sed consequat ante. Morbi sit amet lectus tempor elit tempor cursus ut sed enim. Donec placerat bibendum volutpat.
        </p>
        <p>
            Nunc sit amet eleifend sapien, sed tincidunt neque. Donec id sapien et nunc scelerisque iaculis dignissim nec mauris. Fusce at pretium nulla. Maecenas vel rutrum tellus, a viverra nunc. Aenean at arcu vitae dui faucibus dapibus. Vivamus hendrerit blandit mollis. Aenean sit amet lectus a metus faucibus condimentum. Proin vel eros ut elit pharetra lacinia vitae eu orci. Etiam massa massa, aliquam at pulvinar ut, porttitor eu mauris. Ut in iaculis sapien.
        </p>
        <p>
            In vitae rhoncus arcu. Maecenas elementum nunc quis magna finibus, vitae imperdiet diam pulvinar. Phasellus sit amet nibh eu massa facilisis luctus. Nulla ullamcorper sodales ante id vestibulum. Fusce felis nisi, lacinia sit amet mauris vel, euismod suscipit neque. Mauris quis libero eget enim facilisis pharetra. Fusce non ligula auctor nunc pretium dignissim eget eget turpis. Nam ultricies dolor ac libero maximus vestibulum. Mauris et tortor vitae nisi ultrices vestibulum ac id mauris. Proin interdum dapibus sollicitudin. Phasellus ultricies vulputate sem id hendrerit. Cras eget posuere nunc, in placerat velit. Pellentesque sed ante at elit ornare efficitur. Donec sed condimentum nisl. Curabitur dapibus leo id ligula dignissim pharetra.
        </p>
    </div>
</div>

原文由 kevin b. 发布，翻译遵循 CC BY-SA 3.0 许可协议