流體全高自舉佈局

Question

我想使遊戲佈局填充整個瀏覽器窗口，但不滾動。佈局是這樣的：

+----------------------+ 
+  Header   + 
+------+---------------+ 
+  +    + 
+  +    + 
+ Side + Main  + 
+  + Fill Height + 
+  +    + 
+  +    + 
+----------------------+ 
+  Footer   + 
+------+---------------+ 

如果需要，側邊欄應滾動，但主要內容不應該。佈局應該是有迴應性的：如果瀏覽器太窄，那邊就會出現「標題」，並切換呈現方式（可能Footer也會消失）。

我想使用Bootstrap，但我無法找到有關如何佈局可能的任何細節。即使在此顯示中使用引導程序佈局，是否有意義？或者，我應該用絕對位置（基於％）編碼CSS，並在部分內使用引導部件？

Answer 1

我認爲你可以通過將邊欄和主要內容放在100％高度/寬度的包裝中來創建這種類型的佈局。

看到Bootply這個示例模板：http://bootply.com/102032

編輯：墊sidebar_wrapper根據頁眉和頁腳的高度：

#sidebar-wrapper { 
     height: 100%; 
     padding: 50px 0 50px 0; /* pad top and bottom by height of header and footer */ 
     position: fixed; 
     border-right: 1px solid gray; 
    }