帶滾動條隱藏下拉菜單的邊欄菜單

我有一個帶下拉菜單的邊欄菜單和需要滾動條的長列表。帶滾動條隱藏下拉菜單的邊欄菜單

我遇到的問題是滾動條不在屏幕上，或者由於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

帶滾動條隱藏下拉菜單的邊欄菜單

回答

相關問題