CSS全高度固定在一個浮動的佈局

Question

這裏是我的佈局又是怎樣的jsfiddle例子列：http://jsfiddle.net/qKP2v/13/

我想模仿，如Outlook或Photoshop桌面應用程序，例如外觀，其中左側和右側列固定並佔據屏幕的整個高度。

在我的應用程序中，頁面頂部有一個標題。所以我希望我的標題和側邊欄被修復，並且在用戶滾動時不會移動。只有#content區域應該移動。

這是一個太大的任務在這裏問我不知道。我只使用CSS2（不能使用CSS3）。

Answer 1

您可以使用position:fixed;，使其工作

#header { 
    width:100%; 
    border: 1px solid #444444; 
    height: 100px; 
    margin-bottom:15px; 
    position:fixed; 
    top:0; 
} 
#wrapper { 
    width:100%; 
    margin: 0 auto; 
    background-color: #FFF; 
    min-height:200px; 
    border: 1px solid #F0F; 
} 
#aside-left { 
    float:left; 
    width:100px; 
    border: 1px solid #9C0; 
    position:fixed; 
    top:100px; 
    left:20px; 
} 
#content{ 
    margin:0 130px; 
    margin-top:100px; 
    border: 1px solid red; 
} 
#aside-right { 
    float:right; 
    width:100px; 
    text-align: right; 
    border: 1px solid #9C0; 
    position:fixed; 
    top:100px; 
    right:20px 
} 

FIDDLE