佈局定位的問題：一，不需要動作頭的div應該影響滾動內容div的位置

Question

好有2種情況：

我有這樣一個佈局：

---------------- 
button header 
---------------- 
Contents 
Contents 
Contents 
Contents (with scrollbar) 
Contents 
------------ 
footer 
------------ 

我想什麼實現爲： buttonheader和footer必須始終保持在視圖中 - 內容必須可滾動。 buttonheader可以是空的 - 因此可滾動內容應該移動到 buttonheader之上 - 如果沒有按鈕，沒有任何空間損失。

因此，絕對/固定定位似乎不是一種選擇，所以我嘗試了相對。 （絕對的原因是沒有解決方案，是因爲如果內容完全放在那裏，它們將永遠不會移動，以防萬一buttonhead是空的。）

我將高度設置爲百分比 - 但它當然會看起來很糟糕有人調整窗口大小。

看這裏和調整outputwindow：

sad attempt on how to get a working relative positioned scrollable content

第二個版本：

is to show what it should behave like (at the top part) - content should stick to top of the page - footer is wrong here

Answer 1

靈活的行爲聽起來很像一個錶行的，所以我就去這種方式在CSS中。 添加了一些額外的div，使主要單元格內的Firefox很好地播放。

見http://jsfiddle.net/willemvb/XMEcC/

#container{ 
    position: relative; 
    width: 300px; 
    display: table; 
    height: 100%; 
} 

#header, #footer{ 
    width: 100%; 
    height: auto; 
    display: table-row; 
} 

#main{ 
    height: 100%; 
    display: table-row;  
} 

#cell{ 
    display: table-cell;  
} 

#wrapper{ 
    position: relative; 
    width: 100%; 
    height: 100%; 
} 

#overflow{ 
    overflow-y: scroll; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width:100%; 
} 

編輯：只有在FF和Safari瀏覽器測試