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

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

1 个答案: