jquery - 页眉、主页、页脚拉伸以填充页面

Question

我想要以下类型的 HTML：

<header></header>
<div id='main'></div>
<footer></footer>

其中所有都优选地相对定位。页眉和页脚将具有已知的高度。我希望主 div 默认填满整个页面，页眉位于页面的最顶部，页脚位于页面的最底部。

帮助？

Answer 1

使用jQuery：

$(function() {
     var height = $(window).height() - ($("header").outerHeight() + $("footer").outerHeight());
     $("#main").css("min-height",height+"px");
});

我们所做的基本上是将主 div 高度设置为浏览器视口高度并减去页眉和页脚的高度。

我希望这会有所帮助:)

Answer 2

编辑：与其将你的主要内容拉伸到 90%，不如设置它可能更容易

style='height:100%; margin-top=[header height]; margin-bottom=[footer height]'

因为这将使您的主页面保持一整页的长度，并且页眉和页脚不会重叠内容。试试看。

Answer 3

如果我正确理解您的问题，则该解决方案似乎正在实施

header {position: fixed;}

#main {min-height: 100%;}

footer {position: fixed;}

在此处查看完整示例：http: //jsfiddle.net/J4jDu/1/

Answer 4

这是我一直以来最喜欢的解决方案之一。

http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page

基本上你有一个 100% 最小高度的包装器，然后你在底部构建页脚，在顶部构建页眉，中间的内容将填充其余部分。