html设置只在最后一页显示页脚,在最后一页,html打印 table 页脚底部_html_开发99编程知识库...

如果你只支持 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 FOOTER

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

編輯

在 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的高度取決於頁腳的高度,如果頁腳高度發生變化,您將不得不調整它。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值