Question

我试图在幻灯片menu.scroll只需要下面的内容中修复div总是在顶部如何解决这个问题？请检查我的小提琴

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/

Answer 2

<div id="wrapper">
<!-- Sideba][1]r -->

<div class="topHead"> <!--need to fix this area-->
<input type="text"><input type="button" class="btn btn-info" value="ok">
</div> <!--area ends--> 

<!--//// Do as follow ////

1. add your scroll to id 'sidebar-wrapper' 
2. set the height to 'sidebar-wrapper'
-->
<div id="sidebar-wrapper">   
    <ul>
    <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>

Answer 3

检查此更新的小提琴here

CSS的变化：

#sidebar-wrapper ul {
  height: calc(100% - 34px);
  overflow: auto;
}
#wrapper.active {
  position: absolute;
  left: 250px;
}

注意：评论或删除#sidebar-wrapper样式overflow-y: auto。

如何在bootstrap幻灯片菜单中修复div

3 个答案: