如何使內容可滾動，但不是頁眉和頁腳？

Question

這個問題可能是header and footer fixed, content scrollable和Fixed header, footer with scrollable content的重複，如果不是一個細節，這對我來說非常重要 - 我不想爲內容指定固定的高度和寬度。

http://jsfiddle.net/mark69_fnd/PWRDa/包含一個帶有虛擬數據的真實表單，顯示問題 - 調整窗口大小會使滾動條顯示，但在頁面上而不是在窗體上。在當前佈局中，菜單欄和狀態欄滾動出視圖，我希望它們保持固定，而表單數據滾動。

請不要提供絕對寬度和/或高度的解決方案。我更喜歡用JavaScript計算它們，而不是將它們烘焙到CSS中，除非它是100％。當然，純HTML/CSS解決方案更可取。

這裏是CSS：

html, body, .yui3-app-views { 
    height: 100%; 
    width: 100%; 
} 

.container { 
    position: relative; /* needed for footer positioning*/ 
    margin: 0 auto; 
    height: auto; 
    min-height: 100%; 
    background-color: #eee; 
} 

.content { 
    background-color: #ddd; 
    padding: 0em 0em 2em; /* bottom padding for footer */ 
    overflow: auto; 
} 

#footer { 
    position: absolute; 
    width: 100%; 
    bottom: 0; /* stick to bottom */ 
    background-color: #ccc; 
} 

#status { 
    border: solid 1px #000000; 
} 

#status .error { 
    color: red; 
    font-weight: bold; 
} 

/* ------------------------------------------------------------------------------------*/ 
.char { 
    display: inline-block; 
    vertical-align: top; 
} 

.line { 
    white-space: nowrap; 
} 

/* --------------------------------- fieldset and legend ------------------------------*/ 
.fieldset { 
    border: 2px groove threedface; 
    margin-top: 1em; 
} 

.fakeFieldset { 
    padding: 2px; 
} 

.fieldset > div.legend:first-child { 
    display: inline-block; 
    text-align: left; 
    margin-left: 10px; 
    background: #ddd; 
    position: relative; 
    top: -0.7em; 
} 

.merge-bottom { 
    margin-bottom: -2px; 
} 

/* ------------------------------------ Forms ------------------------------*/ 

form div { 
    white-space: nowrap; 
} 

form select, form input { 
    margin: 2px; 
    border: 1px groove; 
} 

form label:not(.same-line) { 
    width: 8em; 
    text-align: right; 
    display: inline-block 
} 

#cust-balance { 
    text-align: center; 
} 

.ccExpDate { 
    width: 2em; 
} 

#cust-salutation { 
    width: 4em; 
} 

.postalCode { 
    width: 7em; 
} 

#cust-ccAddress { 
    width: 20em; 
} 
​ 

Answer 1

//更新與提問者輸入。

This很好用。我的寬度設置爲100％，但是當然如果你願意，你可以在JS中做到這一點。

你需要給頁眉和頁腳position:fixed

我也把一些填充在.content div來騰出空間頭球頂。

類似如下：

html, body, .yui3-app-views { 
    height: 100%; 
    width: 100%; 
} 

.content { 
    background-color: #ddd; 
    padding: 2em 0em; /* padding for footer and header */ 
} 

.menubar { 
    position: fixed; 
    top: 0px; 
    width: 100%; 
    z-index:1; 
} 

#footer { 
    position: fixed; 
    width: 100%; 
    bottom: 0; /* stick to bottom */ 
    background-color: #ccc; 
}