css - 移动与桌面界面

Question

我正在构建一个 Web 应用程序，它将是桌面版和移动版的混合体。

界面采用Bootstrap 3.0构建，max-width:767px界面切换到手机版

在桌面模式下，左侧的深色侧边栏始终可见，在移动模式下，侧边栏不可见，用户可以在侧边栏开/关之间切换

这按预期工作

在 jsfiddle 中有两个垂直的黑条，它们是内容的占位符。一个在侧边栏中，一个在主窗口中

• 如何在#menu内容溢出时实现滚动条？可滚动区域必须具有视口(viewport)的 100% 高度，具体取决于屏幕分辨率，并且在使用鼠标滚轮时，它不得传播到正文

jsfiddle

http://jsfiddle.net/gjvzn3rb/12/

Answer 1

你是说你想让菜单滚动吗？

您可以通过更改 #menu css 获得 100% 高度和滚动:

#menu {
  position:absolute;
  width:100%;
  top: 50px;
  bottom: 0;
  overflow-y: scroll;
}

如果您希望整个侧边栏滚动，您可以使用(而不是上面的):

#sidebar {
    position:fixed;
    z-index:1;
    top:0;
    left:0;
    bottom:0;
    width:200px;
    background:#1c2b36;
    color:#c4d0d9;
    box-sizing:border-box;
    overflow-y: scroll;
}

overflow-y: scroll; 只允许上下滚动。

请注意，滚动不会传播到正文，直到您到达顶部或底部。