Question

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

我正在多页网站中寻找设计：

标题粘在顶部
页脚是可选的（取决于应用程序中的页面）但如果存在粘性到底部
标题，内容和页脚是对齐的中心并且具有固定的宽度（1024px），在比这更宽的视口上左右任何空间都要填充不同的颜色（无论是通过html /身体背景颜色或通过divs）
如果视口比1024px窄，我们需要对整个页面进行水平滚动（所有标题，内容，页脚底部的一个滚动条）
内容需要滚动，滚动条放在页面上，而不是div
如果内容没有足够的内容填充页眉和页脚之间的空间（或页面底部，如果页脚不存在），它的背景仍将填满它们之间的整个空间
页面，页眉，页脚和内容都有不同的背景颜色（实际页眉和页脚都有相同的），所以任何差距看起来都很不愉快
内容上有基于ajax / jquery的JSF组件，会影响页面加载后内容的高度

布局如下所示：

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

无需支持过时的浏览器。如果无法使用css-only解决方案，则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 Demo Here

Answer 2

这里有太多问题要回答，所以我为你创造了一个jsfiddle

jsfiddle

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

看看这个new jsfiddle我设法让页眉滚动，你可以为页脚做同样的事情

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

2 个答案: