页眉和页脚之间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; 
}