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％最小高度的包装，从那里你建立了底部的页脚，顶部的标题，中间的内容将填补其余部分。

页眉，主页，页脚拉伸以填充页面

4 个答案: