2012-12-04 23 views
0

我創建了一個具有固定導航欄和固定側欄的Bootstrap佈局,以便剩餘跨度(內容跨度)將垂直滾動。不過,我希望內容跨度實際上包含一個窗口標題和一個窗口 - 窗口標題是靜態的,但窗口的內容在窗口內滾動。使用滾動窗口的自舉佈局

.sidebar-nav-fixed { 
    padding: 9px 0; 
    position: fixed; 
    left: 20px; 
    top: 78px; 
    width: 250px; 
} 

.row-fluid > .span-fixed-sidebar { 
    margin-left: 290px; 
} 

.main { 
    margin-top: 80px; 
} 

.header { 
    margin-top: 80px; 
} 

.threadwindow { 
    height: 100%; 
    overflow: auto; 
    border: 1px solid #333; 
} 

我已經張貼在這裏,本代碼http://jsfiddle.net/timburgess/CUGu8/

我會很感激的任何建議。我已經嘗試了固定的位置,窗口標題,但窗口內容簡單地滑過它:-(這是不是我想要的

回答

1

我曾這一點,並在核心的CSS基本上是:

#main { 
    position: absolute; 
    left: 300px; 
    top: 100px; 
    right: 0; 
    bottom: 0; 
    border: 2px solid #333; 
} 


.threadwindow { 
    position: absolute; 
    left: 0; 
    top: 50px; 
    right: 0; 
    bottom: 0; 
    border: 1px solid #333; 
    overflow-y: auto; 
} 

的完整的結果是:

http://jsfiddle.net/timburgess/ZTt5M/

爲清楚起見,我已經包圍了主窗口邊框來強調它並嵌入它是一個子窗口(同樣帶有邊框),它在允許頭子窗口內容如果子窗口溢出可用空間並且使用絕對定位,則子窗口中的子窗口垂直滾動,主窗口右邊框和底部邊框被固定到瀏覽器的邊緣。