英文:
How to make an element sticky but scrollable to its full (variable) height with sibling element?
问题
我正在尝试复制类似Twitter上看到的基本网格布局。到目前为止，一切似乎都运行正常，但我无法使右侧边栏在滚动到其完整可变高度后停止滚动。
在下面的图像中，不应出现白色空白，一旦元素滚动到其完整高度，它应该固定。
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr;
min-height: 100vh;
font-size: 2rem;
}
.inner-grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left-sidebar,
.right-sidebar,
.main {
margin: 0 1rem;
}
.left-sidebar,
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content {
height: 95%;
margin-top: 2.5rem;
}
.left-sidebar {
background-color: burlywood;
height: 100vh;
position: sticky;
top: 0;
}
.main {
background-color: tomato;
height: 1500px;
}
.right-sidebar {
background-color: cadetblue;
height: 900px;
}
.fixed-header {
background-color: black;
color: white;
position: fixed;
width: auto;
top: 0;
}
<div class="container">
<div class="left-sidebar">
<div>
<div>左侧边栏</div>
<div>顶部</div>
</div>
<div>底部</div>
</div>
<div class="inner-grid-container">
<div class="main">
<div class="fixed-header">固定标题</div>
<div class="content">
<div>
<div>主要内容</div>
<div>顶部</div>
</div>
<div>底部</div>
</div>
</div>
<div class="right-sidebar">
<div class="fixed-header">固定标题</div>
<div class="content">
<div>
<div>右侧边栏</div>
<div>顶部</div>
</div>
<div>底部</div>
</div>
</div>
</div>
</div>
英文:
I am trying to replicate the basic grid layout such as which is seen on Twitter. It seems to be working fine so far but I can't get the right sidebar to stop scrolling once it has scrolled to its full variable height.
In the image below the white space should not appear and once the element has scrolled to its full height it should stick.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr;
min-height: 100vh;
font-size: 2rem;
}
.inner-grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left-sidebar,
.right-sidebar,
.main {
margin: 0 1rem;
}
.left-sidebar,
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content {
height: 95%;
margin-top: 2.5rem;
}
.left-sidebar {
background-color: burlywood;
height: 100vh;
position: sticky;
top: 0;
}
.main {
background-color: tomato;
height: 1500px;
}
.right-sidebar {
background-color: cadetblue;
height: 900px;
}
.fixed-header {
background-color: black;
color: white;
position: fixed;
width: auto;
top: 0;
}
<!-- language: lang-html -->
<div class="container">
<div class="left-sidebar">
<div>
<div>left sidebar</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
<div class="inner-grid-container">
<div class="main">
<div class="fixed-header">fixed header</div>
<div class="content">
<div>
<div>main</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
</div>
<div class="right-sidebar">
<div class="fixed-header">fixed header</div>
<div class="content">
<div>
<div>right sideabar</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
答案1
得分: 2
position: sticky;
bottom: 0;
margin-top: auto;
添加到右侧边栏。
英文:
Add
position: sticky;
bottom: 0;
margin-top: auto;
to the right sidebar
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
position: relative;
display: grid;
grid-template-columns: 1fr 3fr;
min-height: 100vh;
font-size: 2rem;
}
.inner-grid-container {
display: grid;
grid-template-columns: 1fr 1fr;
}
.left-sidebar,
.right-sidebar,
.main {
margin: 0 1rem;
}
.left-sidebar,
.content {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.content {
height: 95%;
margin-top: 2.5rem;
}
.left-sidebar {
background-color: burlywood;
height: 100vh;
position: sticky;
top: 0;
}
.main {
background-color: tomato;
height: 1500px;
}
.right-sidebar {
background-color: cadetblue;
height: 900px;
position: sticky;
bottom: 0;
margin-top: auto;
}
.fixed-header {
background-color: black;
color: white;
position: fixed;
width: auto;
top: 0;
}
<!-- language: lang-html -->
<div class="container">
<div class="left-sidebar">
<div>
<div>left sidebar</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
<div class="inner-grid-container">
<div class="main">
<div class="fixed-header">fixed header</div>
<div class="content">
<div>
<div>main</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
</div>
<div class="right-sidebar">
<div class="fixed-header">fixed header</div>
<div class="content">
<div>
<div>right sideabar</div>
<div>top</div>
</div>
<div>bottom</div>
</div>
</div>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论