固定位置容器內的可滾動內容

Question

我有一個Bootstrap內置的網站，其中包含一個覆蓋頁腳，點擊頁腳菜單後打開。

這個頁腳內部是一個可滾動的內容區域，它在滾動div上設置固定高度時能夠正常工作。由於該網站是響應式的，我需要這個可滾動區域是一個百分比高度，似乎伸出可見窗口。

一個例子是在這裏：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; 
} 

我怎麼能有一個固定的位置，容器內的滾動的DIV？

Answer 1

給予最大高度應該修復它

.scrollable { 
overflow-y: scroll; 
max-height:300px; 
height: 50%; 

width: 95%; 
background: red; 

}

這裏是小提琴 http://jsfiddle.net/JUESu/10/