我用一个#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>你写了：
有没有办法让左栏固定？
我很欣赏一种使它适用于网格布局的方法。
如果您希望元素保持为网格项，则答案为“否”。
一旦元素有position: absolute或position: fixed（which is a form of absolute positioning, with reference to the viewport），它就具有新的特征：
从规格：
网格容器的绝对定位子节点是流出而不是网格项，因此不会影响其他项的放置或网格的大小。
因此，网格项与绝对定位不兼容。
但是，将position: fixed应用于网格容器时不会有问题。
考虑分别管理你的#left和#right元素。 #left可以是固定位置的网格容器。 #right可以是另一个网格容器并保持流入状态。
另外，另外，您已经为网格项目提供了基于百分比的填充：
.section {
padding: 5% 5% 5% 5%;
}
将margin和padding应用于网格项目（和弹性项目）时，最好远离百分比单位。浏览器可以不同地计算值。
您可以通过将这些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>你可以做这样的事情
这是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;
}
在右侧面板中添加一个div，您要滚动哪个面板，然后给出一些max-height和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;
}<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>试试这个：
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;
}
我有一点同样的问题。我需要一个带有可滚动内容的固定sidenav（col 1）（col 2）。这是我解决问题的方法（注意我使用了样式组件，但你肯定可以使用常规的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是可折叠的。但我认为这对你有用。