Css 移动与桌面界面

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

该接口采用Bootstrap 3.0构建，并带有

最大宽度：767px

接口切换到移动版本

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

这是意料之中的事

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

• 当内容溢出时，如何在

  #菜单中实现滚动条？可滚动区域必须具有100%的视口高度，这取决于屏幕分辨率，并且当使用鼠标滚轮时，它不得传播到主体

JSFIDLE

---

如果您取出z指数：-1；并添加溢出：滚动；这将实现你的目标。 像这样：

#menu 
{
  position:absolute;    
  width:100%;
  padding-left:200px;
  height:100%;
  min-height:100%;
  box-sizing:border-box;
  background:#f0f3f4;
  overflow:scroll;
}

---

如果您只想滚动菜单，请将

#菜单更改为以下内容：

#menu {
    position:absolute;
    margin-top:50px;
    width:100%;
    overflow: scroll;
    height: 100%;
}


注意：当菜单滚动时，徽标将保持在顶部


或者，如果希望整个侧边栏滚动：

#sidebar { 
  overflow-y: scroll;
}

添加一个
overflow-y:scroll
到您的侧边栏，这样当它溢出时，您可以在其中滚动，而不必滚动正文内容

您的意思是希望菜单滚动吗

通过更改
#菜单
css，您可以获得100%的高度和滚动：

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

如果希望滚动整个侧边栏，可以使用（而不是上面的）：

overflow-y：滚动只允许上下滚动

请注意，只有当您点击顶部或底部时，滚动才会传播到正文。
如何在内容溢出时使HTML元素可滚动：

当内容以高度溢出时，制作一个滚动条

overflow-y: scroll;

当内容以宽度水平溢出时，制作一个滚动条：

overflow-x: scroll;

当内容在宽度和高度上溢出时，制作一个滚动条：

overflow: scroll;

对不起，这不是主要问题，而是次要问题。通过将CSS选择器更改为正确的div（如接受的答案中所示），同样的技术也会起作用。我已经编辑了我的答案。给菜单一个滚动溢出将重叠的标志。最好是包含徽标，在这种情况下，您会给侧边栏设置溢出。除非他只想要菜单，否则还有更多的重新调整要做。（不是填充顶部，而是空白顶部）编辑：您不需要添加到其他容器中。只需给#侧边栏加上一个溢出，就可以设置。只有
#菜单
需要滚动……）<代码>#徽标
必须保留在顶部，然后css的第一位应该会有所帮助。：）这很有效。。但是为什么
#main
中的背景只有视口的高度？当您向下滚动时，背景在折叠处结束，因为您将
#main
设置为
高度：100%
。取下这个，它就会被修复。
overflow: scroll;