我想有以下類型的HTML:

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

其中所有這些都優選相對定位。頁眉和頁腳將有已知的高度。我希望默認情況下，主div填充整個頁面，頁眉在頁面的頂部，頁腳在頁面的底部。

救命？

使用jquery:

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

我們所做的基本上是將主div高度設置為瀏覽器視口高度，并減去頁眉和頁腳的高度。

希望有所幫助:)

編輯:不要把你的主要部分拉伸到90%,直接設定可能更容易

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

因為這樣可以讓你的主頁保持一整頁的長度，不會有頁眉和頁腳重疊的內容。試試看。

如果我沒理解錯你的問題，解決方案似乎是實現

header {position: fixed;}

#main {min-height: 100%;}

footer {position: fixed;}

請看完整的例子:http://jsfiddle.net/J4jDu/1/

這是我一直以來最喜歡的解決方案之一。

http://matthewjamestaylor . com/blog/keeping-footers-at-bottom-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;
}