頁腳在打印頁面上重疊內容

我正在嘗試寫一個長的HTML頁面，打印時它包含一個頁腳，其中顯示「僅供官方使用（FOUO）」。我把它定位在頁面的底部，但是頁面的內容也下降了很多，或者頁腳重疊。我試圖設置我的@media打印CSS，使頁面的主要內容比頁面的整個高度小50個像素，但這不起任何作用。這裏是我的CSS：頁腳在打印頁面上重疊內容

@media print { 
#content { 
    max-height: calc(100% - 50px); 
} 
#printFooter { 
    position: fixed; 
    text-align: center; 
    bottom: 0; 
    margin: 0 auto 0 auto 
}

}

這正好與以下形式的HTML文件：

<body> 
    <div id="content">Lots of text in this div to make it extend beyond first page</div> 
    <div id="printFooter">For Official Use Only (FOUO)</div> 
</body>

是否有人可以幫助我弄清楚如何設置我的CSS使內容不會在頁面底部重疊？

克里斯

來源

2017-02-16 Chris

你想獲得在最底層的每個打印頁底部的頁腳，或僅有1個頁腳最後一頁？ – zgood

對我來說，它完美地工作https://plnkr.co/edit/wkINSBwXfCWGqi4uwTVd?p=preview –

我想要在每個打印頁面的底部獲得頁腳，但無法讓它工作。如果我打印預覽，它不會顯示在所有頁面上。 – Chris

我發現只有這個解決方案，但我們失去了一些文字（

<body> 
    <div id="content">Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first page</div> 
    <div id="printFooter">For Official Use Only (FOUO)</div> 
</body> 

@media print { 
    #printFooter { 
    position: fixed; 
    text-align: center; 
    bottom: 0; 
    width: 100%; 
    background: #fff; 
    margin: 0 auto 0 auto 
}

來源

2017-02-16 20:07:41 grinmax

否則這可以通過一些divs來控制，這些divs會在打印版本中顯示，並且會進行額外的填充 – grinmax

我剛剛嘗試了上面的代碼，並添加了一個。我添加了一個邊界，並填充到介質打印內的內容部分： [代碼] @media打印{ \t \t \t \t＃內容{ \t \t \t \t \t填充底：50像素; \t \t \t \t \t border-bottom：1px solid; \t \t \t \t} \t \t \t \t #printFooter { \t \t \t \t \t位置是：固定; \t \t \t \t \t text-align：center; \t \t \t \t \t bottom：0; \t \t \t \t \t width：100％; \t \t \t \t \t background：#fff; \t \t \t \t \t保證金：0汽車0汽車 \t \t \t \t} \t \t \t} [/代碼] 我得到頁腳在每個頁面的底部，但在第一頁上，它與重疊最後一行文字的中間。而邊框只出現在第二頁上。 – Chris

頁腳在打印頁面上重疊內容

回答

相關問題