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

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% 最小高度的包装器，然后从那里在底部构建页脚，在顶部构建页眉，中间的内容将填充其余部分。

#container {
   display:grid;
   grid-template-rows:auto 1fr auto;
   grid-template-columns:100%;
   /* fallback height */
   min-height:100vh;
   /* new small viewport height for modern browsers */
   min-height:100svh;
}