頁眉和頁腳之間100％的內容

Question

讓我們假設我有以下佈局（見下圖）...我有一個頁眉（A）在頂部，頁腳（C）始終在底部，容器（ B）位於中間，並且應該將標題和頁腳之間的空白填充100％。

想不出任何辦法如何實現這一目標使用純CSS。任何想法，將不勝感激！

Answer 1

根據頁面設置的方式，如果您爲容器元素的（B）和position: absolute;設置了height: 100%;，則可能會有效。這裏有一個例子：

HTML：

<div id="container"> 
    <div id="header"></div> 
    <div id="body"></div> 
    <div id="footer"></div> 
</div>​ 

CSS：

#container { 
    height: 100%; 
    width: 100%; 
    background: green; 
    position: absolute; 
} 
#header, #footer { 
    height: 100px; 
    width: 100%; 
    background: red; 
} 
#body { 
    height: 100%; 
    width: 100%; 
    background: blue; 
}​ 

jsFiddle

Answer 2

你的問題相當多描述了塊級如何標準元素，如DIV行事。中心div將始終佔據兩者之間100％的空間，並將根據其內容增長。這就是說，我假設你想要一個固定頁腳 - 一個保持位於瀏覽器窗口底部的腳註。這是achiavable使用多種技術，其中一個是絕對使用的定位：

<div id="header">Header</div> 
<div id="content">Main Content</div> 
<div id="footer">Footer</div> 

風格：

#header, #footer, #content { position: absolute; left: 0; width: 100%; } 
#header, #footer { overflow: hidden; background: #444; height: 100px; } 
#header { top: 0; } 
#content { top: 100px; bottom: 100px; overflow: auto; background: #CCC; } 
#footer { bottom: 0; }​ 

http://jsfiddle.net/U9wfy/

Answer 3

我碰到這個問題，想到了一個更「現代」答案會有幫助。這種佈局很容易使用Flexbox的 ..

https://www.codeply.com/go/1QgRb4uFmj

<header> 
</header> 
<main></main> 
<footer> 
</footer> 

html, body { 
    margin: 0; 
    height: 100%; 
} 

body { 
    display: flex; 
    flex-direction: column; 
} 

header, 
footer { 
    flex: none; 
    background: #ddd; 
} 

main { 
    overflow-y: scroll; 
    flex: auto; 
}