javascript - 可折叠侧边栏.....想要修复侧边栏的页眉和页 footer 分

Question

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

  #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 处理，如 this snippet 中所示。 .

您可能想要为菜单添加一个容器并为该容器设置一个固定高度(屏幕尺寸 - 页眉高度 - 页脚高度)。

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 设置边栏的页眉和页脚高度，然后计算菜单容器的高度并通过代码进行设置。