html - CSS:仅使侧面菜单可滚动

标签 html css navigation scroll overflow

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

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

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
}

最佳答案

我只是给你一个例子,说明我是如何使用溢出卷轴来制作我的一张 table 的。你应该设置一个高度然后说如果你想要在 y 轴或 x 轴上滚动,例如溢出-y。

我的表格的 CSS:

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

关于html - CSS:仅使侧面菜单可滚动,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22825257/

相关文章:

c# - 如何使用 OnChange 事件制作 HtmlSelect 控件以触发 C# 代码隐藏功能

swift - 如何指定各个导航栏的标题颜色? swift

php - 单击单个图像的不同部分以触发 jquery 事件(基本上在单击时显示文本)

html - 元素未正确调整大小

html - 表格滚动条

javascript - Gulp.js 不会重新加载纯 CSS

jsf - #{bean.function} 和#{bean.function()} 有什么区别?

xcode - 无法在 xcode 中隐藏导航栏

html - 如何在 ASP 中添加空格NET MVC View

html - 在 CSS 中添加版本的目的是什么?