使用粘性頁腳時CSS旁邊高度100％

Question

我有一個頁眉和sticky footer的佈局。都是40px高。現在我需要添加一個scroolbar，這將填補自由空間（verticaly）。它應該看起來像這樣：

有兩個限制：

• 沒有JavaScript的
• 沒有CSS3計算（）函數

是否有任何嚴格的CSS解決方案這個問題？

Answer 1

以下是我即將解釋的一個小樣本：little link。

首先，分別使用absolute和fixed定位您的header和footer。將40px填充到body的頂部和底部，並確保其box-sizing爲border-box。將您的aside的height設置爲100%，並確保它是border-box。基本上;

HTML：

<header> 
    I'm a header! 
</header> 
<aside> 
    Lots and lots and lots of content! 
    Glee is awesome! 
</aside> 
<footer> 
    I'm a footer! 
</footer> 

CSS：

html { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 100%; 
} 
body { 
    padding-top: 40px; 
    padding-bottom: 40px; 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 100%; 
} 
header { 
    height: 40px; 
    width: 100%; 
    position: absolute; 
    top: 0px; 
} 
footer { 
    height: 40px; 
    width: 100%; 
    position: fixed; 
    bottom: 0px; 
} 
aside { 
    -moz-box-sizing: border-box; 
    -webkit-box-sizing: border-box; 
    box-sizing: border-box; 
    height: 100%; 
    overflow: auto; /*make sure there are scrollbars when needed*/ 
} 

Answer 2

由於只有position: fixed，利潤率（42PX進行測試的目的和原因，那麼，42，但它應該是40像素）和一個額外的div在#aside的內部，這裏是一個小提琴：http://jsfiddle.net/PhilippeVay/xcuVv/2/，可在Firefox，Chrome，Safari 4，IE8和Opera 11或12中使用，但在IE7中失敗，並且如果需要兼容性則需要回退。

要注意的是這樣的設計並沒有考慮到：

在上網本或智能手機
• 垂直空間
• 如果頁眉和頁腳佔據超過40像素（縮放文本高達每200％會發生什麼WCAG 2.0，比平常更大的字體在某些操作系統和瀏覽器等）
• 內部滾動（到一邊）的一些手機瀏覽器幾乎是不可能的使用空間或Page Down鍵滾動只有一個頁面將滾動
• 人一個半屏幕（80px太多）那會讓他們煩惱（err，我們）。請請讓您的酒吧被隱藏或減少到一個單一的按鈕，並通過簡單的點擊一個按鈕管理在JS ...