html - 垂直固定页眉和页脚，可滚动内容，水平居中

Question

在具有固定/粘性底部和标题的 10k+ SO 问题中，我找不到以下内容(它从 #3 开始变得有趣)。

我正在寻找一个多页网站的设计，其中:

• 标题粘在顶部

• 页脚是可选的(取决于应用程序中的页面)但如果存在则粘在底部

• 页眉、内容和页脚居中对齐并具有固定宽度 (1024px)，在视口(viewport)上它们左右两边的任何空间比这更宽意味着用不同的颜色填充(无论是通过 html/主体背景颜色或通过 div)

• 如果视口(viewport)小于 1024px，我们需要对整个页面进行水平滚动(页面底部的所有页眉、内容、页脚都需要一个滚动条)

• 内容需要可滚动，滚动条要放在页面，而不是div
• 如果内容没有足够的内容来填充页眉和页脚之间的空间(或页面底部，如果页脚不存在)，它的背景仍应填满它们之间的整个空间
• 页面、页眉、页脚和内容都有不同的背景颜色(实际上页眉和页脚是一样的)，所以任何空白看起来都很不愉快
• 在页面加载后影响内容高度的内容上有基于 ajax/jquery 的 JSF 组件

布局是这样的:

+-+----------+-+
| | header   | ||
| +----------+ ||
| | content  | ||
| |          | ||
| |          | ||
| |          | ||
| +----------+ ||
| |footer    | ||
+-+----------+-+

无需支持过时的浏览器。如果无法实现纯 css 解决方案，则可以选择 jquery。

SO 上有很多解决方案，包括 jsfiddles，它们非常接近，即 http://jsfiddle.net/7S4Xx/但解决方案总是缺少较小视口(viewport)的垂直滚动，或者内容背景占据整个空间或内容滚动，这与我得到的程度相似。非常感谢您的帮助。

Answer 1

看起来您正在将多个问题合并为一个问题:)

我正在为您提出许多要点的解决方案。浏览下面的 jsfiddle，让我知道它对您有多大帮助。

 <div class="wrapper">
<div class="container">
 <header></header>
 <div id="content">
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>
<p>HELLO</p>

<p>HELLO</p>
<p>HELLO</p>
<p>HELLOWEEN</p>
 </div>
 <footer></footer>
 </div>
 </div>

Jsfiddle Demo Here