title: Scrollable content inside fixed position container
body: <p>I have a Bootstrap built website which contains an overlay footer which open upon clicking the footer menu.</p>
  
  <p>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.</p>
  
  <p>An example is here:  <a href="http://jsfiddle.net/JUESu/5/" rel="noreferrer">http://jsfiddle.net/JUESu/5/</a></p>
  
  <pre><code>#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;
  }
  </code></pre>
  
  <p>How can I have a scrollable div inside a fixed position container?</p>