Question

页面本身是不可滚动的，#container中的内容也是如此，但我无法弄清楚如何使侧面导航可滚动。在示例中，我使用li填充了#menu，因此它溢出了页面，但是您没有看到它，因为身体上的溢出设置为关闭。

HTML

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

<div id="container"></div>

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
}

Answer 1

我只是举例说明我是如何使用溢出滚动执行其中一个表格的。你应该设置一个高度，然后说你想要在y轴或x轴上滚动，例如溢出-γ

我桌子的CSS：

#exampletable {
    margin-left: auto;
    margin-right: auto;
    overflow-y: auto;
    height: 150px;
    width: 680px;
}

Answer 2

我找到了一个使用可变高度做到这一点的好方法。提供菜单position:absolute;而不是float，您可以使用top:0;或bottom:0;来锚定它。设置height:100%会将菜单限制为窗口高度，overflow:scroll可让您查看被切断的内容。其他所有内容都可以设置为overflow:hidden;

http://jsfiddle.net/zsSrZ/4/

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

#menu {
    width: 200px;
    background: blue;
    position: absolute;
    overflow: scroll;
    top: 0px;
    height: 100%;
    padding-top: 10px;
}

Answer 3

您可以添加＆＃34;滚动＆＃34;到＆＃34;溢出＆＃34;使用可滚动的对象的属性，我使用＆＃34; overflow-y＆＃34;将对象设置为水平滚动而不是垂直滚动的defaut。

<div id="menu">
 <ul>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
  <li>List</li>
 </ul>
</div>
<div id="container"></div>

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

 #menu {
 overflow-y: scroll;
 width:200px;
 background: #FFFFFF;
 float:left;
 height:30px;
 margin-top:54px
 position: absolute;
 }

CSS：只允许侧面菜单滚动

3 个答案: