css - 带滚动条的侧边栏菜单隐藏下拉菜单

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%表示视口(viewport)的高度，但是 #bottomStuff由于 #topStuff 而偏离顶部和 hr ，因此该元素超出了视口(viewport)的高度。

(假设你的浏览器是500px高，那么#bottomStuff就是500px高，但是如果#topStuff是100px高，那么只有#bottomStuff的400px在视口(viewport)中可见，而底部的100px是不可见的，因为它超出视口(viewport)，你永远不会看到溢出，因为 position: fixed )

如果你需要支持的浏览器支持CSS3的calc() (你可以在 http://caniuse.com/#search=calc 查看浏览器对 calc() 的支持)，如果你知道 #topStuff + hr 的高度，你可以像这样使用它:

#bottomStuff {
    height: calc(100% - 200px); /* Where 200px is the height of #topStuff + hr */
}

这是一个工作演示:https://jsfiddle.net/jonsuh/xo1z0yyg/