在引導程序中管理儀表板模板的高度固定

Question

我在引導程序中使用管理儀表板模板，我需要幫助。 從上圖中可以看到，我有一個固定的側邊欄和主頁面內容包裝器。主頁面內容具有「頁面包裝器」的標識。問題是這一個：

#page-wrapper { 
    width: 100%; 
    padding: 0; 
    background-color: #fff; 
} 

這其中有一個自動調整頁面包裝的高度，這對於一個表與幾個記錄（假設沒有pgination還）作品。但是，它不適用於記錄較少的表格。那個黑色部分將填補空白空間。 我已經嘗試設置高度：

#page-wrapper { 
    width: 100%; 
    height: 700px; 
    padding: 0; 
    background-color: #fff; 
} 

但是，當我繼續在這方面的Web應用程序開發，我不覺得一個固定的高度，因爲我會加入更多的測試數據它在fture。有人能幫幫我嗎？謝謝。

我試圖

#wrapper, #page-wrapper{ 
     position: absolute; 
} 

但頁面包裝縮小和未來留下一個黑色的空間課程。 （更新）

Answer 1

按我的理解，你正在試圖修復左側邊欄

我對桌面和小型設備少的建議，以及處理resposiveness。

桌面：計算您的窗口的viewpoert的高度，並將相同的高度設置到下一列。所以這樣做的第一個讀取你的窗戶的高度，並將其存儲在變量，然後分配給它的左側邊欄，做:) 兩者都將始終高度相同

Tab或暴民/基本小型設備：作爲UX透視用戶應該能夠隨時接近導航選項卡，以便您可以使用漢堡菜單，或者像任何應用程序一樣將其作爲圖標的頂部或底部。

的參考喲可以點擊這個鏈接的高度 http://api.jquery.com/height/

三江源:)

Answer 2

正如我明白了，你想設置頁面包裝填充所有的頁面沒有固定高度的整合。 因此，您需要將頁面包裝器的父級設置爲容器的完整高度。

假設，body是#page-wrapper的父親。試試這個：

html, body { 
height: 100%; 
} 

#page-wrapper { 
    width: 100%; 
    padding: 0; 
    background-color: #fff; 
    height: 100%; 
}