页眉和页脚之间 100% 的内容答案

【问题标题】：Content with 100% between header and footer页眉和页脚之间 100% 的内容
【发布时间】：2012-07-07 08:36:44
【问题描述】：

假设我有以下布局（见下图）...我在顶部有一个页眉 (A)，在底部有一个页脚 (C)，在中间有一个容器 (B)应将页眉和页脚之间的剩余空间填充 100%。

想不出如何使用纯 css 来实现这一点。任何想法将不胜感激！

【问题讨论】：

【解决方案1】：

根据您的页面设置方式，如果您为 (B) 设置 height: 100%; 并为容器元素设置 position: absolute; ，它可能会起作用。这是一个例子：

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

【讨论】：

在小提琴中，页脚最初位于页面底部下方。

【解决方案2】：

您的问题几乎描述了标准块级元素（例如 DIV）的行为方式。中心 div 将始终占据两者之间 100% 的空间，并且会根据其内部内容而增长。

也就是说，我假设您需要一个 FIXED 页脚 - 一个位于浏览器窗口底部的页脚。这可以通过多种技术实现，其中一种是使用绝对定位：

<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/

【讨论】：

经过几个小时的谷歌搜索，这是唯一能实现我想要的东西。谢谢！

【解决方案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;
}

【讨论】：

这感觉是最正确（现代）的方法。我现在正在使用它。