CSS 在网格中放置粘性侧边栏
CSS Position Sticky Sidebar Within Grid
我有一个简单的页面，我想要一个粘性 header 和一个粘性侧边栏。这是一个 fiddle，这是相同的代码：
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
粘性 header 工作正常。
粘性侧边栏不起作用。侧边栏位于设置 CSS 网格的包含元素中，并以 max-width 居中。我读过 sticky sticks to its nearest scrolling ancestor，所以我认为这是行不通的，因为 body 正在滚动而不是容器 div，但我不确定该怎么做。
如果我在容器 div 上执行类似 height: 100px 的操作，我最终会在 div 而不是 body 上使用滚动条。我想要 body.
上的卷轴
如果我在侧边栏上使用 fixed 位置，网格就会中断（内容 div 现在跨越 100% 的容器）并且我必须知道顶部粘性的高度bar 来设置滚动条的偏移量。如果顶部栏的高度变化，这将不起作用。
解决这个问题的方法是什么？
您可以将 align-self: flex-start 添加到 覆盖 sidebar( 因为它是网格项)
现在您可以显式 将 100vh height 设置为 sidebar - 请参阅下面没有 grid-gap 和/或 [=19= 的演示] 或 padding
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
/*grid-gap: 50px;*/
grid-template-columns: max-content 1fr;
/* margin-top: 50px;*/
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: 100vh; /* set a fixed height */
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
加回 grid-gap、margin 和 padding - 您可以调整在 sidebar 上设置的 explicit 高度- 请参阅下面的演示：
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: calc(100vh - 30px); /* set a fixed height */
padding-top: 20px;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
我有一个简单的页面，我想要一个粘性 header 和一个粘性侧边栏。这是一个 fiddle，这是相同的代码：
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
粘性 header 工作正常。
粘性侧边栏不起作用。侧边栏位于设置 CSS 网格的包含元素中，并以 max-width 居中。我读过 sticky sticks to its nearest scrolling ancestor，所以我认为这是行不通的，因为 body 正在滚动而不是容器 div，但我不确定该怎么做。
如果我在容器 div 上执行类似 height: 100px 的操作，我最终会在 div 而不是 body 上使用滚动条。我想要 body.
如果我在侧边栏上使用 fixed 位置，网格就会中断（内容 div 现在跨越 100% 的容器）并且我必须知道顶部粘性的高度bar 来设置滚动条的偏移量。如果顶部栏的高度变化，这将不起作用。
解决这个问题的方法是什么？
您可以将 align-self: flex-start 添加到 覆盖 sidebar( 因为它是网格项)
现在您可以显式 将 100vh height 设置为 sidebar - 请参阅下面没有 grid-gap 和/或 [=19= 的演示] 或 padding
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
/*grid-gap: 50px;*/
grid-template-columns: max-content 1fr;
/* margin-top: 50px;*/
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: 100vh; /* set a fixed height */
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>
加回 grid-gap、margin 和 padding - 您可以调整在 sidebar 上设置的 explicit 高度- 请参阅下面的演示：
#top {
position: sticky;
top: 0;
border: 1px solid red;
width: 100%;
}
.container {
display: grid;
grid-gap: 50px;
grid-template-columns: max-content 1fr;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
max-width: 900px;
}
.sidebar {
border: 1px solid blue;
position: sticky;
top: 0;
/* ADDED */
align-self: flex-start; /* override the default stretch */
height: calc(100vh - 30px); /* set a fixed height */
padding-top: 20px;
}
.content {
border: 1px solid green;
}
<div id="top">
sticky header
</div>
<div class="container">
<div class="sidebar">
sticky sidebar
</div>
<div class="content">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus at ipsum mi. Integer laoreet a nisl quis imperdiet. Etiam sed ligula rutrum, viverra arcu vitae, mattis lectus. Aliquam rutrum eros id quam sodales volutpat. Suspendisse sed neque ut mauris
luctus hendrerit. Suspendisse auctor aliquam rutrum. Sed sodales placerat est. Donec vel elit vitae ipsum ultrices tristique. Nulla auctor, dolor at porta laoreet, ex nisi auctor orci, in posuere enim arcu at tortor. Etiam sed ante mattis sem pharetra
condimentum. Nullam a eros nec metus feugiat tincidunt vel sed lectus. Nunc accumsan nisi sit amet auctor rhoncus. Vestibulum diam risus, sodales non diam a, tristique ullamcorper erat.
</p>
<p>
Aliquam posuere libero at felis maximus, quis pulvinar diam dictum. Integer id nisi non turpis bibendum suscipit. Duis pellentesque leo vitae elit mollis malesuada. Duis eget magna et odio mattis bibendum. Ut et rutrum diam, quis luctus mi. Duis in molestie
elit. Nullam consequat turpis velit, sit amet venenatis tellus bibendum non. Etiam iaculis luctus sem, et aliquam nisl commodo et. In consectetur ac nibh ac porttitor. Nulla euismod facilisis faucibus. Phasellus sed risus convallis, elementum est
nec, euismod lorem. Nulla sodales auctor dapibus. Curabitur euismod neque dolor, at sagittis arcu congue ultrices. Morbi nec finibus tortor.
</p>
<p>
Aliquam vestibulum dictum nisi non sollicitudin. Integer ac magna viverra, cursus lorem quis, interdum ex. Phasellus id neque pulvinar, dignissim augue ut, lobortis leo. Duis sed elit et ipsum auctor convallis. Donec non orci suscipit, eleifend tellus
pretium, vehicula turpis. Mauris et justo et est cursus accumsan et vel elit. In egestas lobortis imperdiet. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum ante ipsum primis in faucibus orci luctus
et ultrices posuere cubilia Curae; Etiam dictum vel lorem in varius. Etiam accumsan nibh at ex mollis, id porta leo sodales. Suspendisse mauris urna, faucibus in turpis et, porttitor lobortis lectus. Cras facilisis feugiat tortor sed laoreet. Nam
cursus malesuada lorem sed bibendum. Sed dapibus, mi vel elementum vehicula, augue massa pulvinar erat, vitae rutrum eros nisi sed neque.
</p>
<p>
Nulla sodales lectus vitae urna ullamcorper, eu mattis lacus iaculis. Praesent eleifend eu sem nec aliquet. Pellentesque consequat nisl ac odio efficitur, vitae interdum sapien gravida. Proin sed commodo leo. Quisque sem sem, euismod id sapien eget, fermentum
consectetur turpis. Praesent aliquam eros id ipsum vehicula, aliquam pellentesque massa pellentesque. Etiam nec elit arcu. Donec eget ullamcorper nisl, in porta nibh. In non ante id elit tincidunt convallis. Suspendisse sit amet dictum sapien, vel
lobortis mi. Mauris eu pharetra ante. Morbi vestibulum orci at augue pulvinar iaculis. Vestibulum quis dui et odio tristique laoreet eget id augue.
</p>
<p>
Nulla finibus lorem in risus efficitur, at cursus nunc molestie. In pellentesque quis quam et sollicitudin. Mauris at turpis felis. Nulla facilisi. Cras pellentesque malesuada felis, sit amet dapibus lectus efficitur auctor. Mauris dictum eu nisl non
commodo. Quisque at risus eget quam dictum aliquet. Curabitur malesuada magna et efficitur bibendum. Curabitur ultrices luctus lorem. Vivamus sodales elit quis metus mattis, pretium semper mi finibus.
</p>
</div>
</div>