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

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

我遇到的问题是滚动条不在屏幕上，或者由于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）？

来源

2015-10-22 Jeff

＃wrap {height：100％; overflow：hidden;}这里隐藏的溢出隐藏了下拉列表 – Bosc

我知道，但是我怎样才能让'bottomStuff'包装物成为屏幕上留下的100％高度...这听起来没有JS。 – Jeff

这里的问题是#bottomStuff { height: 100% }。 height: 100%表示视口的高度，但由于#topStuff和hr，#bottomStuff从顶部偏移，因此该元素延伸超过视口的高度。

（比方说，您的浏览器是500像素高，然后#bottomStuff是500像素高，但如果#topStuff是100像素高，只有#bottomStuff 400像素中视可见，底部100像素，因为它超出了视区是不可见的，你永远不会看到，因为position: fixed溢出）

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

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

下面是一个工作演示：https://jsfiddle.net/jonsuh/xo1z0yyg/

来源

2015-10-22 16:38:25 jonsuh

好的解决方案，你可以使用JavaScript来计算topStuff的高度，并将CSS设置为bottomStuff（如果topStuff是动态的），如下所示：height：calc（100％ - topStuffHeight） – makshh

因此，（-100％）“，因为它在计算函数中将PX作为％处理。 – Jeff

@Jeff您正在测试的浏览器是否支持CSS3的'calc（）'？如果您在Chrome或现代浏览器中查看演示链接，它会按预期工作。 – jonsuh

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

回答

相关问题