英文:
Scrollable content to bottom of screen
问题
我试图实现这个布局。基本上类似于 Facebook 消息页面（facebook.com/messages）的布局。
我在这里尝试了一下，但运气不太好：
https://jsfiddle.net/3nd0b17m/23/
基本上，屏幕部分的滚动条应该在屏幕的末尾结束，而不是继续向下滚动。
有谁可以帮助我实现这个？
英文:
I have this layout I am trying to achieve. Basically similar to what facebook have for messages (facebook.com/messages)
I have been trying it out here but with partial luck:
https://jsfiddle.net/3nd0b17m/23/
Basically the screen section scroll bar should end at the end of the screen and now further down.
Could anyone help me achieve this?
答案1
得分: 1
我会通过将侧边栏的位置设置为固定来实现这一点，以确保在滚动页面的同时它保持在适当的位置。
这是更新后的fiddle链接：https://jsfiddle.net/odukje08/3/
祝你好运！
编辑：我为侧边栏添加了一些flex属性，使其更具响应性并始终具有正确的高度。
英文:
How I would go about this, is make the sidebar position fixed, to make sure it stays nicely in place while you scroll the rest of the page.
Here is an updated fiddle: https://jsfiddle.net/odukje08/3/
Good luck!
Edit: I added some flex properties to the sidebar, to make it more responsive and always have the right height.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
.container {
display: flex;
height: 2000px;
overflow-y: hidden;
}
.left {
background-color: red;
width: 20%;
position: fixed;
left: 0;
top: 0;
height: 100vh;
display: flex;
flex-direction: column;
}
.left-bottom {
background-color: green;
height: 100%;
overflow-y: auto;
}
.right {
flex-grow: 1;
padding-left: 20%;
}
<!-- language: lang-html -->
<div class="container">
<div class="left">
<div class="left-top">
<p>
This is the top
</p>
</div>
<div class="left-bottom">
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
<p>
stuff
</p>
</div>
</div>
<div class="right">
<h1>
hello
</h1>
<p>
this is the right side. You can scroll me too!
</p>
</div>
</div>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论