Sidebar menu with scrollbars hiding dropdowns

Question

I have a sidebar menu with dropdowns and a long list that needs a scroller.

The issue I'm having is either the scrollbar is off the screen or the dropdown is hidden because of overflow: hidden; or both.

Here is my 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/

How do I get dropdowns and scrollbars to work in a position: fixed sidebar (without JS)?

#wrap {height:100%; overflow:hidden;} overflow hidden here is hiding the dropdown — Bosc, Oct 22 '15 at 16:30
I know, but how do I get the `bottomStuff` wrapper to be 100% height of whatever is left on the screen... that doesn't sound possible without JS. — Jeff, Oct 22 '15 at 16:35

jonsuh · Accepted Answer · 2015-10-22T16:40:46.313

1

The problem here is #bottomStuff { height: 100% }. height: 100% represents the height of the viewport, but #bottomStuff is offset from the top because of #topStuff and hr, therefore the element is extending beyond the height of the viewport.

(Let's say your browser is 500px high, then #bottomStuff is 500px high, but if #topStuff is 100px high, only 400px of #bottomStuff is visible in the viewport, and the bottom 100px is not visible because it extends beyond the viewport, and you'll never see the overflow because of position: fixed)

If the browsers you need to support support CSS3’s calc() (You can check browser support for calc() at http://caniuse.com/#search=calc), you can use it like this if you know the height of #topStuff + hr:

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

Here's a working demo: https://jsfiddle.net/jonsuh/xo1z0yyg/

edited Oct 22 '15 at 16:40

answered Oct 22 '15 at 16:38

jonsuh

2,875
1
18
23

Good solution, and you can use JavaScript to calculate height of the topStuff and set CSS to bottomStuff (if your topStuff is dynamic) something like this: height: calc(100% - topStuffHeight) – max Oct 22 '15 at 16:40
So, this keeps giving me `height: calc(-100%)` because its treating the PX as % in the calc function. – Jeff Oct 22 '15 at 17:04
@Jeff Does the browser you're testing this on support CSS3's `calc()`? If you check the demo link in Chrome or a modern browser it works as expected. – jonsuh Oct 22 '15 at 17:07
I'm using Chrome. Here's an example `height: calc(100% - 10px);` gives me `height: calc(90%);` I figured out 'why' but not a fix... I'm using less. less is doing the math before the css can. – Jeff Oct 22 '15 at 17:09
Can you make a demo or show me a screenshot of how you know Chrome is calculating the height as `calc(90%)`? I can't replicate your issue. When I put in `calc(100% - 10px)`, Chrome's inspector is properly calculating the height. Here's a screenshot: http://i.imgur.com/vRzgyeb.png – jonsuh Oct 22 '15 at 17:13
In less, you have to escape the calculation so that css3 will do it instead of less: `height: ~"calc(100% - @{rightbarTopCombinedHeight})";` [This](http://stackoverflow.com/questions/14279328/is-there-a-way-to-use-variables-in-less-for-the-operator-like-calc100) showed me. – Jeff Oct 22 '15 at 17:14
Ah, then it’s a LESS issue and not a CSS issue. Not sure. I tried your solution with escaping calc and it worked fine for me. – jonsuh Oct 22 '15 at 17:20

Sidebar menu with scrollbars hiding dropdowns

1 Answers1