CSS:仅使侧面菜单可滚动

Chr*_*eid 3 html css navigation scroll overflow

示例在这里http://jsfiddle.net/zsSrZ/

该页面本身是不可滚动的,其中的内容也是#container不可滚动的,但是我不知道如何使侧面导航可滚动。在示例中,我#menu用li 过度填充,因此它会溢出页面,但您看不到它,因为溢出已设置为关闭。

的HTML

<div id="menu">
  <ul>
    <li></li>
        .
        . 
        .
        .
        .
    <li></li>
  </ul>
</div>

<div id="container"></div>
Run Code Online (Sandbox Code Playgroud)

的CSS

#container {
  position:absolute;
  width:100%;
  top:0;
  bottom:0;
  z-index:-1;
  overflow:hidden;
  background:red;
}

#menu {
  width:200px;
  background:white;
  float:left;
  height:100%;
  margin-top:54px
}
Run Code Online (Sandbox Code Playgroud)

小智 5

我只是给你一个例子,说明我如何使用溢出滚动条做一张桌子。您应该设置一个高度,然后说出是否要在y轴或x轴上滚动,例如,overflow-y。

我表的CSS:

#exampletable {
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    height: 150px;
    width: 680px;
}
Run Code Online (Sandbox Code Playgroud)