Javascript 可折叠侧边栏…要修复侧边栏的页眉和页脚部分吗

在我的网页上，当点击一个特定的图标时会出现侧边栏。在侧边栏的底部有一个文本框，它的输入在一个特定的php页面上运行，输出在侧边栏上打印。我想修复侧边栏标题和侧边栏页脚相对于侧边栏的位置（即，当侧边栏处于活动状态时）。当内容增长时，只有侧边栏main应该滚动。到现在为止，整个侧边栏都会滚动。提前谢谢你

#bot{
位置：固定；
底部：50；
左:10 ;；
光标：指针；
}
.覆盖{
/*全屏*/
宽度：100vw；
高度：100vh；
/*透明黑*/
背景：rgba（0,0,0,0.8）；
位置：固定；
排名：0；
左：0；
显示：无；
/*中间层，即显示在侧边栏下方*/
z指数：9998；
}
#边栏{
宽度：350px；
位置：固定；
排名：0；
左：-350px；
高度：100vh；
z指数：999；
背景：线性梯度（向左，#26a0da，#314755）；
颜色：#fff；
过渡：均为0.3秒；
溢出y：滚动；
盒影：3p3p3pRGBA（0,0,0,0.2）；
}
#侧边栏{
左：0；
}
#解雇{
位置：绝对位置；
排名前10名；
右:20 ;；
光标：指针；
-webkit转换：所有0.3；
-o-过渡：均为0.3s；
过渡：均为0.3秒；
}
.glyphicon.glyphicon-remove{
字体大小：20px；
}
.覆盖{
位置：固定；
宽度：100vw；
高度：100vh；
背景：rgba（0,0,0,0.7）；
z指数：998；
显示：无；
}
#边栏。边栏标题{
宽度：350px；
填充：20px；
排名：0；
背景：线性梯度（向右，#26a0da，#314755）；
文本对齐：居中；
位置：绝对位置；
}
#侧边栏。侧边栏菜单{
宽度：350px；
填充：20px；
文本对齐：居中；
#位置：固定；
}
#边栏。边栏页脚{
宽度：350px；
填充：20px；
底部：0；
背景：线性梯度（向右，#26a0da，#314755）；
文本对齐：居中；
#位置：固定；

边栏标题

您可能需要简化代码，以避免包含不属于问题一部分的元素（如侧边栏的“活动”类），因为您的代码段实际上没有显示任何内容。此外，对代码段上的图像使用相对路径也不会真正起作用

另一方面，不清楚侧边栏的页眉和页脚是否为固定高度（或整个侧边栏）。在第一种情况下，可以单独使用CSS处理，如中所示

您可能需要为菜单添加一个容器，并为该容器设置一个固定高度（屏幕大小-页眉高度-页脚高度）

HTML

---

如果您想要侧边栏的页脚或页眉的自动高度（我不建议这样做），那么您应该从javascript设置侧边栏的页眉和页脚高度，然后计算菜单容器的高度并从代码中进行设置。

很高兴我能帮上忙。干杯。

<nav id="sidebar">
    <div class="sidebar-header">
        <!-- Header content -->
    </div>
    <div class="sidebar-menu">
        <div class="menu-container">
            <!-- Menu content -->
        </div>
    </div>
    <div class="sidebar-footer">
        <!-- Footer content -->
    </div>
</nav>

#sidebar {
    width:350px;
    position:fixed;
    left:0;
    top:0;
    height:100vh;
}

.sidebar-header {
    height:100px;
    position:relative; /* doesn't need to be absolute */
    width:100%
}

.sidebar-footer {
    height:100px;
    position:absolute; /* the footer goes to the bottom */
    bottom:0;
    left:0;
    width:100%
}

.menu-container {
    height: calc(100vh - 200px); /* screen height - header height - footer height */
    overflow: auto; /* this makes your container div to scroll if the content's overflowing */
}