html - 如何修复 bootstrap 幻灯片菜单中的 div

Question

我正在尝试修复幻灯片菜单中始终位于顶部的 div。滚动只需要波纹管内容我该如何解决这个问题？请检查我的 fiddle

https://jsfiddle.net/kannankds/j79hggn3/

<div id="wrapper">
<!-- Sidebar -->
   <div id="sidebar-wrapper">
      <div class="topHead"> <!--need to fix this area-->
        <input type="text"><input type="button" class="btn btn-info" value="ok">
     </div> <!--area ends-->     
     <ul>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
        <li>menu1</li>
    </ul>
  </div>
<!-- Page content -->
 <div id="page-content-wrapper">
   <div class="content-header">
     <h1 id="home">
       <a id="menu-toggle" href="#" class="glyphicon glyphicon-align-justify btn-menu toggle">
       <i class="fa fa-bars"></i>
       </a>
    </h1>
   </div>
</div>

https://jsfiddle.net/kannankds/j79hggn3/

Answer 1

  #sidebar-wrapper .topHead{
       position: absolute;
       top: 0;
   }
   #sidebar-wrapper ul{
      margin:0px;
      padding-top:50px;
      overflow: auto;
      height: 100%;
    }

使用侧边栏顶部的绝对位置并将高度设置为 ul 并将溢出滚动添加到菜单项 conatiner ul 。检查它是否有效 https://jsfiddle.net/31ndd6kk/4/