Question

我有一个带有下拉列表的侧边栏菜单和一个需要滚动条的长列表。

我遇到的问题是滚动条不在屏幕上，或者由于overflow: hidden;或两者都隐藏了下拉列表。

这是我的CSS：

/* I want dropdowns to be on the left */
 .dropdown-menu {
    top: 0;
    left: -160px;
}
#rightbar {
    position: fixed;
    right: 0;
    height: 100%;
    background: lightgray;
    width: 300px;
}
/* Normally, you'd do this, but this makes the dropdown not show; ALSO, the scrollbar is off the screen */
 #wrap {
    height:100%;
    overflow:hidden;
}
#bottomStuff {
    height: 100%;
    overflow-y: auto;
}

https://jsfiddle.net/cp0fqyt9/

如何在position: fixed侧边栏（没有JS）中使用下拉列表和滚动条？

Answer 1

这里的问题是#bottomStuff { height: 100% }。 height: 100%表示视口的高度，但#bottomStuff因#topStuff和hr而偏离顶部，因此元素超出了视口的高度。< / p>

（假设您的浏览器为500px高，则#bottomStuff为500px高，但如果#topStuff为100px高，则视口中仅显示400px的#bottomStuff ，并且底部的100px不可见，因为它超出了视口，并且由于position: fixed）你永远不会看到溢出

如果您需要支持的浏览器支持CSS3 calc()（您可以在http://caniuse.com/#search=calc查看calc()的浏览器支持），如果您知道{的高度，可以像这样使用它{1}}：

#topStuff + hr

这是一个有效的演示：https://jsfiddle.net/jonsuh/xo1z0yyg/

带有滚动条的侧边栏菜单隐藏下拉列表

1 个答案: