如果你只支持 Firefox,這實際上很容易。 (跳到編輯中可以看到一種技術,它也可以在IE中運行,但是,功能較少。 至於 Chrome 當我發布這個答案時它不支持重複頁腳,所以我沒有測試它
在內容末尾添加一個大的底部 margin 。 它必須足夠大,以保證超過頁面的末尾。 不用擔心,這不會在文檔的結尾添加一個空白頁面。 邊距在列印中扮演特殊角色,因為當超出頁面邊界( 參見規範,第 13.3.3節) 時,它們會被取消。 但是,Firefox仍然將頁腳放在頁面底部,就好像它是由分頁符觸發的一樣。 (另一方面, IE 只是忽略了截斷 margin ,這就是為什麼這種方法在該瀏覽器中不起作用的原因
你可以將 margin 放在偽元素上以保持你的HTML整潔, 你可以使用 @media print 來阻止它在屏幕上顯示
這是代碼。 要看它在Firefox中工作,打開這個jsfiddlejsfiddle,右鍵單擊輸出,選擇此Frame> Show only this Frame,然後進行列印預覽。@media print {
#content:after {
display: block;
content:"";
margin-bottom: 594mm;/* must be larger than largest paper size you support */
}
}
PAGE HEADER
PAGE FOOTERcontent
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
編輯
在 Firefox 和 IE 中還有另外一個選項。 你所要做的就是將頁腳放在單獨的
這是代碼。 要看它在Firefox中工作,打開這個 jsfiddlejsfiddle,右鍵單擊輸出,選擇此Frame> Show only this Frame,然後進行列印預覽。 在 IE 中,單擊輸出框,點擊 CTRL+A,執行列印預覽,然後將"在屏幕上布局"更改為"在屏幕上選擇"。@media print {
#spacer {height: 2em;}/* height of footer + a little extra */
#footer {
position: fixed;
bottom: 0;
}
}
PAGE HEADER
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
content
這種方法的主要限制是它在列印作業的每個頁面上放置一個相同的頁腳, 這意味著你不能有任何頁面具有不同的頁腳或沒有頁腳 。 此外,由於spacer的高度取決於頁腳的高度,如果頁腳高度發生變化,您將不得不調整它。