Меню боковой панели с прокруткой скрывает выпадающие списки

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, поэтому элемент выходит за пределы высоты окна просмотра.

(Скажем, ваш браузер 500px высокий, то #bottomStuff является 500px высока, но если #topStuff является 100px высокий, только 400px из #bottomStuff видна в окне, а нижний 100px не видно, потому что он выходит за пределы окна просмотра, и вы никогда не увидите переполнения из-за 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/