How to set a shadow on a two panels page, regardless of its height?

Question

I have already found an answer, but I am not sure this is the best approach for my problem. My page has two panels: one sidebar and one content view. I want to have a shadow over the sidebar as if the content view was producing it:

The problem is that my sidebar is a menu with buttons, icons, etc. So if I try to set the (inset) shadow there:

.sidebar {
    box-shadow: inset -7px 0 9px -7px rgba(0,0,0,0.7);
}

I get:

So, where I have the buttons, they hide the shadow. If I do it the other way so the content view actually produces it:

.content {
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}

I get the shadow along with the content, but if the content is "shorter" than the total height of the screen, the shadow disappears. Similar to the previous case.

My final approach was to set a manual height for the content view or with Javascript, to adapt it to the viewport height. But I am not sure this is the best way to do it. I would like to know if there is a more CSS way to do it, without having to set things manually or getting shadows cut.

EDIT

While creating a fiddle for better understanding my problem I realized that I had a background-color on the buttons. But since I have a hover and a transition on the button, it still hides the shadow. Check it out: http://jsfiddle.net/h3cp59qd/

Answer 1

Check this out: http://jsfiddle.net/h3cp59qd/3/

Use position:absolute for both sidebar and content:

body, html {
    background: #D8D8D8;
    height: 100%;
    margin: 0;
    padding: 0;
}

#app {
    width: 100%;
    height: 100%;
    position: relative;
}

#sidebar {
    width: 20%;
    z-index: 1;
    position: absolute;
    top: 0;
    bottom: 0;
    background: #C8C8C8;
}

#sidebar ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

#sidebar ul li {
    padding-left: 20px;
    height: 60px;
    text-transform: uppercase;
    color: white;
    font-weight: 900;
    font-size: 12pt;
    line-height: 60px;
    vertical-align: middle;
}

#sidebar ul li:hover {
    background: #c0c0c0; 
    color: #EEE;
}

#content {
    width: 80%;
    position: absolute;
    z-index: 100;
    left: 20%;
    top: 0;
    bottom: 0;
    padding: 0 50px;
    box-shadow: -7px 0 9px -7px rgba(0,0,0,0.7);
}