在最后一頁的最底部打印表格頁腳

Question

我正在使用一個表格在每個頁面上創建一個頁腳（在 Firefox 中工作，這就足夠了）。

一個 JS 小提琴： https : //jsfiddle.net/j9k2xzze/

（右鍵單擊輸出窗格 -> 此框架 -> 在新選項卡中打開框架。然后打印預覽將正常運行）

<table id="wrapper">
    <thead>
    <tr>
        <td id="header"></td>
    </tr>
    </thead>

    <tfoot>
    <tr>
        <td colspan="0" id="footer">
            <img src="footer.jpg"/>
        </td>
    </tr>
    </tfoot>

    <tbody>
    <tr>
        <td id="content">
            <?php echo $html; ?>
        </td>
    </tr>
    </tbody>
</table>

但在最后一頁，表格頁腳直接顯示在文本下方。 如果文本比最后一頁短，則頁腳會粘在它上面。

我喜歡頁腳在最后一頁的最底部。 不幸的是，@page 擴展在 Firefox 中不起作用，或者我做錯了：

@page:last {
  #footer {
    position: absolute;
    bottom: 0;
  }
}

Answer 1

如果您只支持Firefox，這實際上非常簡單。 （跳到編輯，看看一種技術也可以在IE中運行但功能不太多。當我發布這個答案時，Chrome和其他webkit瀏覽器不支持重復頁腳，所以我沒有測試它們）。

您所要做的就是在內容的末尾添加一個較大的底部邊距。 確切的大小並不重要，但它必須足夠大，以確保超過頁面的末尾。 我建議至少將其設置為您認為用戶將使用的最大紙張尺寸。

不用擔心，這不會在文檔末尾添加空白頁。 邊距與其他形式的空白區域（例如填充和<br>標記）不同，因為它們在超出頁面邊界時會被取消（ 請參閱規范 ，第13.3.3節）。 Firefox和IE都會刪除邊距，但Firefox仍然會在頁面底部生成一個頁腳，就好像發生了分頁一樣。 （IE，另一方面，表現就好像邊距從未出現過，這就是為什么這種方法在該瀏覽器中不起作用的原因。）

您可以將邊距放在偽元素上以保持HTML整潔，並且可以使用@media print來阻止它顯示在屏幕上。

這是代碼。 要在Firefox中查看它，請打開此jsfiddle ，右鍵單擊輸出，選擇“此幀”>“僅顯示此幀”，然后執行打印預覽。

 @media print { #content:after { display: block; content: ""; margin-bottom: 594mm; /* must be larger than largest paper size you support */ } } 

 <table> <thead> <tr> <th>PAGE HEADER</th> </tr> </thead> <tfoot> <tr> <td>PAGE FOOTER</td> </tr> </tfoot> <tbody> <tr> <td id="content"> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content </td> </tr> </tbody> </table> 

---

編輯

還有另一種選擇適用於Firefox和IE。 您所要做的就是將頁腳放在單獨的<div>並將其固定到頁面底部，然后使用重復的<tfoot>作為間隔符。 這種方法確實有一些小缺點（詳見下面的代碼段）。

這是代碼。 要在Firefox中查看它，請打開此jsfiddle ，右鍵單擊輸出，選擇“此幀”>“僅顯示此幀”，然后執行打印預覽。 在IE中，單擊輸出框，按CTRL + A，執行打印預覽，並將“在屏幕上顯示為”更改為“在屏幕上選擇”。

 @media print { #spacer {height: 2em;} /* height of footer + a little extra */ #footer { position: fixed; bottom: 0; } } 

 <table> <thead> <tr> <th>PAGE HEADER</th> </tr> <thead> <tfoot> <tr> <td id="spacer"></td> </tr> </tfoot> <tbody> <tr> <td> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content<br> content<br>content<br>content<br>content<br>content<br>content<br>content </td> </tr> </tbody> </table> <div id="footer"> PAGE FOOTER </div> 

此方法的主要限制是它在打印作業的每個頁面上放置一個相同的頁腳，這意味着您不能有任何頁面具有不同的頁腳，或沒有頁腳。 此外，由於墊片的高度取決於頁腳的高度，如果頁腳高度發生變化，則必須調整它。

Answer 2

如果您使用絕對或固定位置，則無法在最后一頁上設置頁腳。 如果您只想在頁面不夠長的情況下在底部使用頁腳，請使用不需要絕對/固定位置的粘性頁腳技術。 像這樣的東西

html, body {
  height: 100%;
  margin: 0;
}
.wrapper {
  min-height: 100%;
  margin-bottom: -50px;
}
.footer,
.push {
  height: 50px;
}

如果你真的需要每頁底部的頁腳，我建議先生成pdf並打印出來。 如果你需要打印復雜的東西，你最終會最終生成pdf，print css非常有限。

Answer 3

這是一個有趣的問題，從未遇到/需要這個，所以我也學到了新的東西。 但這是我的工作解決方案（你實際上非常接近）：

隨着#wrapper { position: relative }的#header ， #footer和#content { position: absolute }和額外的位置和高度掌管着你的CSS（HTML不變），你完全在布局的控制。 您的代碼可能如下所示：

下面的片段，jsFiddle： 小提琴和小提琴輸出框架

 html,body { height: 100%; width: 100%; overflow: hidden } #wrapper { position: relative; height: 95%; width: 100%; } #wrapper #header { position: absolute; top: 0; height: 100px; } #wrapper #content { position: absolute; top: 100px; } #wrapper #footer { position: absolute; bottom: 0; } @media print { h1 { page-break-before: always; } @page { size: A4; margin: 0; } } 

 <table id="wrapper"> <thead> <tr> <td id="header">HEADER TEXT</td> </tr> </thead> <tfoot> <tr> <td colspan="0" id="footer"> <img src="https://unsplash.it/200?image=031" /> </td> </tr> </tfoot> <tbody> <tr> <td id="content"> Welcome <h1>NEXT PAGE</h1> just one line </td> </tr> </tbody> </table> 

Answer 4

嗨，我剛剛將以下媒體查詢添加到您的CSS。 它起作用了

@media print {
 #footer {
    position: absolute;
    bottom: 0;
  }
}

檢查以下小提琴

https://jsfiddle.net/jjsqgaza/