时间戳

首页 > 解决方案 > 可折叠侧边栏.....想要修复侧边栏的页眉和页脚部分

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

问题描述

在我的网页上单击特定图标时会出现侧边栏。在侧边栏页脚中有一个文本框，其输入在特定的 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>

标签： javascripthtmlcss

解决方案

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

另一方面，尚不清楚您的侧边栏的页眉和页脚是否是固定高度（或整个侧边栏）。在第一种情况下，可以单独使用 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 设置侧边栏的页眉和页脚高度，然后计算菜单容器的高度并从代码中设置它。

推荐阅读