我有一个经典的网站，左侧是菜单，右侧是内容。菜单相当长，但在某些页面上，内容真的长。所以我希望菜单始终可以从左侧访问，即使您已经向下滚动。我通过以下方式完成了这一点：
<body>
<div id="header" style="z-index:-1;">
<div id="menu" style="position:fixed;top:0px;height:2000px;overflow:hidden;">
Menu contents
</div>
</div>
<div id="main" style="margin-left:180px;margin-top:0px;z-index:100;">
Main page contents
</div>
</body>
还有其他款式
div#menu
{
float: left;
}
div#main
{
clear: both;
padding: 20px;
}
我的问题是，对于小视口，菜单底部位于视口下方，并且不滚动。我想让菜单随页面内容一起滚动，但只能滚动到菜单底部。之后，内容应该在没有菜单的情况下继续滚动。
这可能吗？
我还没有尝试过任何东西，因为我不确定要尝试什么。
“float”不适用于布局样式
这个怎么样？ 滚动条需要自定义。
body, html {
margin: 0;
padding: 0;
}
div#menu
{
background: #222;
position:fixed;
overflow-y: auto;
padding: 20px;
height: 100vh;
color: #fff;
z-index: 1;
}
div#menu .inner {
height: 2000px;
}
div#main
{
padding: 20px;
height: 2000px;
}<body>
<div id="header" style="z-index:-1;">
<div id="menu">
<div class="title">Menu header</div>
<div class="inner">
Menu contents
</div>
</div>
</div>
<div id="main" style="margin-left:180px;margin-top:0px;z-index:100;">
Main page contents
</div>
</body>