Scrollable content inside fixed position container

Question

I have a Bootstrap built website which contains an overlay footer which open upon clicking the footer menu.

Inside this footer is a scrollable content area which works correctly when a fixed height is set on the scrollable div. As the site is responsive I need this scrollable area to be a percentage height which seems to stretch out of the visible window.

An example is here: http://jsfiddle.net/JUESu/5/

#footer-content {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background-color: black;
    opacity: 1;
    display: block;
    color: #7f7f7f;
    height:85%;
}

.scrollable {
    overflow-y: scroll;
    height: 50%; /* Doesnt Work */
    /*height: 300px; /* Works */
    width: 95%;
    background: red;
}

How can I have a scrollable div inside a fixed position container?

Answer 1

Giving maximum height should fix it

.scrollable {
    overflow-y: scroll;
    max-height:300px;
    height: 50%;
  
    width: 95%;
    background: red;
}

Here is the fiddle http://jsfiddle.net/JUESu/10/