可折叠侧边栏...想要修复侧边栏的页眉和页脚部分

Question

在我的网页侧边栏上，单击特定图标时会出现。在侧边栏页脚中有一个文本框，其输入在特定 php 页面上运行，输出打印在侧边栏主上。我想修复相对于侧边栏的侧边栏标题和侧边栏页脚(即，当侧边栏处于活动状态时(。只有侧边栏主应该在内容增长时滚动。截至目前，整个侧边栏滚动。提前谢谢你！

#bot {
position: fixed;
bottom: 50;
left: 10;
cursor: pointer;
}
.overlay {
/* full screen */
width: 100vw;
height: 100vh;
/* transparent black */
background: rgba(0, 0, 0, 0.8);
position: fixed;
top: 0;
left: 0;
display: none;
/* middle layer, i.e. appears below the sidebar */
z-index: 9998;
}
#sidebar {
width: 350px;
position: fixed;
top: 0;
left: -350px;
height: 100vh;
z-index: 999;
background: linear-gradient(to left, #26a0da, #314755);
color: #fff;
transition: all 0.3s;
overflow-y: scroll;
box-shadow: 3px 3px 3px rgba(0, 0, 0, 0.2);
}
#sidebar.active {
left: 0;
}
#dismiss {
position: absolute;
top: 10;
right: 20;
cursor: pointer;
-webkit-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
.glyphicon.glyphicon-remove {
font-size: 20px;
}
.overlay {
position: fixed;
width: 100vw;
height: 100vh;
background: rgba(0, 0, 0, 0.7);
z-index: 998;
display: none;
}
#sidebar .sidebar-header {
width: 350px;
padding: 20px;
top: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
position: absolute;
}
#sidebar .sidebar-menu {
width: 350px;
padding: 20px;
text-align: center;
#position: fixed;
}
#sidebar .sidebar-footer {
width: 350px;
padding: 20px;
bottom: 0;
background: linear-gradient(to right, #26a0da, #314755);
text-align: center;
#position: fixed;

<div class="wrapper">
<nav id="sidebar">
<!-- Close Sidebar Button -->
<div id="dismiss">
<span class="glyphicon glyphicon-remove"></span>
</div>
<!-- Sidebar Header -->
<div class="sidebar-header">
<h3>Sidebar-Header</h3>
</div>
<!-- Sidebar Main -->
<div class="sidebar-main">
<div id="result"></div>
<!-- Result comes from javascript part -->
</div>
<!-- Sidebar Footer -->
<div class="sidebar-footer">
<div id="message-box" class="col-md-5 col-md-offset-3">
<input type="text" id="message" name="message" value="" placeholder="Messages" />
</div>
</div>
</nav>
<div id="sidebarCollapse">
<img src="icon2.png" id="bot">
</div>
<div class="overlay"></div>
</div>

Answer 1

您可能需要简化代码以避免包含不属于问题的元素(例如侧边栏的"活动"类(，因为您的代码段实际上并没有显示任何内容。此外，在代码段上使用图像的相对路径也不起作用。

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

您可能希望为菜单添加一个容器，并为该容器设置固定高度(屏幕大小 - 页眉高度 - 页脚高度(。

.HTML

<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>

.CSS

#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 */
}

如果你想为侧边栏的页脚或页眉自动设置高度(我不推荐(，那么你应该从javascript设置侧边栏的页眉和页脚高度，然后计算菜单容器的高度并从代码中设置它。