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

Question

在10k +具有固定/粘性底部和标题的SO问题中，我找不到以下内容（它从第3点开始很有趣）。

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

• 标头粘在顶部

• 页脚是可选的（取决于应用程序中的页面），但是如果底部存在粘性

• 页眉，内容和页脚居中对齐并具有固定宽度（1024px），在视口上其左侧和右侧的任何空间都比此宽，这意味着要用其他颜色填充（无论是通过html / body背景色还是通过divs ）

• 如果视口的宽度小于1024px，则需要对整个页面进行水平滚动（页面底部的所有页眉，内容和页脚都需要一个滚动条）

• 内容需要可滚动，滚动条应放置在页面上，而不是div
• 如果内容没有足够的内容来填充页眉和页脚之间的空间（或页面底部，如果页脚不存在），则背景仍应填充它们之间的整个空间
• 页面，页眉，页脚和内容均具有不同的背景颜色（实际上页眉和页脚具有相同的背景色），因此任何间隙看起来都非常不令人满意
• 内容上存在基于ajax / jquery的JSF组件，这些组件会影响页面加载后内容的高度

布局看起来像这样：

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

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

有很多解决方案，包括jsfiddles在内，都非常接近，例如http://jsfiddle.net/7S4Xx/，但是解决方案始终缺少垂直滚动的较小视口，或者内容背景占据整个空间或内容滚动，这与我到达的距离相似。 非常感谢您的帮助。

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演示在这里

Answer 2

嘿，有太多问题要在这里回答，所以我为您创建了一个jsfiddle

jsfiddle

$(function() {
    $('#content').css('min-height' : $('body').height() - $('header').height() - $('footer').height() + 'px')
});

看看这个新的jsfiddle，我设法使标题水平滚动了，您可以对页脚进行相同的操作