沿着页面滚动Div，停在页面的底部(就像Twitter)
沿着页面滚动Div，停在页面的底部(就像Twitter)
提问于 2021-01-03 23:11:58
我在某个时候被困住了。我想做一个三栏的版面设计。中间部分用于发布，正确的部分用于其他链接和参考等等(有点长)。左边是固定的。
我的问题是:当右旋到底部时，我怎样才能阻止它移动？如果中间div的内容较短，那么右边还有一个滚动条，用于右边div的页面。就像推特一样。
我试过集思广益。我想Twitter可能会为这些部分制作双div。一个是正常的，另一个是固定的底部。因此，普通的一张是用来滚动的页面，另一张是贴在上面的。但我不确定我是不是对的。
或者用纯CSS可以吗？(而且我使用的是TailwindCSS)
总之，这是我的想法的介绍。(或者您可以简单地查看twitter主页提要)
这里也有一个礼物；
回答 1
Stack Overflow用户
发布于 2021-01-04 02:14:45
您可以在需要停止position: sticky; bottom: 0的元素中使用以下CSS代码
有关“位置:粘性；”属性如何工作？的更多信息，请参阅下面关于堆栈溢出的文章
希望这能回答你的问题！
编辑：试用这个
.main {
width: 100%;
height: 1000px;
display: flex;
}
.first {
width: 30%;
background-color: red;
}
.second {
width: 40%;
background-color: green;
}
.third {
width: 30%;
background-color: blue;
height: 500px;
position: sticky;
top: 0px;
}
p {
margin-left: 20px;
}<div class="main">
<div class="first">
<p>
Left content.
</p>
</div>
<div class="second">
<p>
Main content.
</p>
</div>
<div class="third">
<p>
Right content.
</p>
</div>
</div>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/65555875
复制相关文章
相似问题
腾讯云开发者
