如何使用CSS网格布局在CSS中创建固定列？

Question

我创建了一个简单的网站，其#container div是两个div的父级：#left和#right，使用Grid Layout：

有没有办法让左栏固定？我希望左侧文本保持其位置，并且正确的文本可以像现在一样滚动。将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>

Answer 1

您可以通过将这些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

粘贴位置的链接：Sticky position with nothing but 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>

Answer 2

您写道：

  

有没有办法让左栏修好？

     

我很欣赏使用网格布局的方法。

如果您希望元素保留为网格项，则答案为＆＃34; no＆＃34;。

一个元素有position: absolute或position: fixed（which is a form of absolute positioning, with reference to the viewport）后，就会有新的特征：

• 该元素已从文档流程中删除
• 该元素已从grid formatting context
中删除
• 元素不再是网格项

来自规范：

  

10. Absolute Positioning

     

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

所以网格项在绝对定位方面效果不佳。

但是，在将position: fixed应用于网格容器时，您不会遇到问题。

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

另外，除此之外，您已经为网格项目提供了基于百分比的填充：

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

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

• Percentage padding on grid item being ignored in Firefox
• Why doesn't percentage padding work on flex items in Firefox?

Answer 3

你可以做这样的事情

这是fiddle

这是代码

body {
    margin: 0 0 0 0;
}

#container {
    display: grid;

}

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

#left {
    background-color: aquamarine;
    height: 100%;
    position: fixed;
    width: 50%
}

#right {
    background-color: beige;
    overflow: scroll;
    width: 50%;
    right: 0;
    position: absolute;
}

Answer 4

您不能使left保持粘性，但可以使其中的所有内容具有粘性。为此，您应该制作粘性包装元素并将所有内容放入其中，如下所示：

HTML：

<div class="grid">

    <div class="left">
       <div class="sticky_wrapper">Content</div>
    </div>

    <div class="right">
        Content
    </div>

</div>

CSS：

.grid { display: grid; grid-template-columns: 50% 50%; }
.left { background-color: aquamarine; }
.right { background-color: beige; }
.sticky_wrapper { position: sticky; top: 0; }

因此，粘性包装材料中的所有内容都不会糊涂。

Answer 5

试试这个：

body {
    margin: 0 0 0 0;
}

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

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

#left {
    background-color: aquamarine;

    p {
      position: fixed;
    }
}

#right {
    background-color: beige;
}

https://jsfiddle.net/km5gdrcm/3/

Answer 6

在右侧面板中添加一个div，您要滚动的面板会显示一些overflow: auto;和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; } .scroll-div { max-height: 300px; overflow: auto; }，因此左侧面板将会粘贴，右侧面板内容将滚动。

＆＃13;

＆＃13;

<div id="container">
    <div id="left" class="section">
        <p>This should not scroll</p>
    </div>
    <div id="right" class="section">
        <div class="scroll-div">
        <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>
</div>

＆＃13;

defaultdict

＆＃13;

＆＃13;

＆＃13;

Answer 7

我也有同样的问题。我需要一个具有可滚动内容（列2）的固定sidenav（列1）。这是我解决问题的方法（请注意，我使用了样式组件，但您可以肯定地使用常规的CSS，SASS，Less或任何其他方式）：

<Grid>
  <SideNav>
    <Sider>
  </SideNav>
  <Content />
<Grid>

现在为每个样式组件提供css属性：

const Grid = styled.div`
  position: relative;
  display: grid;
  height: 100%;
  grid-template-columns: auto 1fr;
  grid-template-areas: 'sidenav content';
`

const Sidenav = styled.div`
  position: relative;
  grid-area: sidenav;
`
const Content = styled.div`
  position: relative;
  grid-area: content;
  width: 100%;
`

const Sider = styled.aside`
  position: fixed;
  height: 100vh;
`

看起来像这样，但是对我来说有点复杂，因为我的网格中也有页眉和页脚，并且sidenav是可折叠的。但是我认为这可能对您有用。

Answer 8

我今天偶然发现了这一点，并通过添加以下内容使其起作用：

#left {
  position: sticky;
  left: 0;
}