Our site has a fixed sidebar containing a sticky footer. This worked fine when viewed on displays where the browser height was greater than the height of the sidebar content but on smaller displays the footer was "cut off".To remedy this, I added a media query which would change the footer to be relatively positioned inside the sidebar and set \[code\]overflow: auto\[/code\] on the sidebar:\[code\]/* sidebar padding + menu height + footer height */@media screen and (max-height: 580px) { .sidebar .footer { position: relative; }}\[/code\]Although this at least allows the full sidebar content to be viewed on smaller displays it also means we end up with a scrollbar on the sidebar which doesn't look very nice.What I would like to happen is that if the browser viewport is smaller than the height of the sidebar content you should be able to scroll using the normal page scrollbar to view all the content.I imagine this is possible with a media query to change the \[code\]position\[/code\] of the sidebar but I just can't seem to figure it out.
- Fiddle with full code: http://jsfiddle.net/benfosterdev/pRBgT/
- Full screen result demonstrating the problem: http://fiddle.jshell.net/benfosterdev/pRBgT/show/light/