打印：如何將頁面上的頁腳粘貼到底部？

我試圖將生成的HTML文檔打印爲PDF。文件本身可以容納多個頁面。每個頁面都是這樣構建的：打印：如何將頁面上的頁腳粘貼到底部？

<!-- Header --> 

<!-- Content --> 

<!-- Footer -->

這三個頁面在每個頁面上看起來都不錯。唯一的問題是頁腳不會粘在底部......頁腳會始終趕上頁面的最後一個元素。只要頁面中充滿了足夠的內容，頁腳就會像您期望的那樣位於底部。

這裏是我的CSS：

.docFooter{ 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    padding-right: 2cm; 
    padding-bottom: 1cm; 
}

我也試着產生一個單獨的CSS是這樣的：

@media print{ 
    .docFooter{ 
     display: -webkit-box; 
     display: -ms-flexbox; 
     display: flex; 
     -webkit-box-pack: justify; 
     -ms-flex-pack: justify; 
     justify-content: space-between; 
     width: 100%; 
     position: absolute; 
     bottom: 0; 
     padding-right: 2cm; 
     padding-bottom: 1cm; 
    } 
}

當然，我使用的CSS是這樣的：

<link rel="stylesheet" href="./main.min.css" media="all">

Sidenotes：

我只需要瀏覽器的支持，因爲我與electron framework
開發我使用這個：https://github.com/delight-im/HTML-Sheets-of-Paper CSS文件，使頁面上看到像他們將要打印的用戶。
邏輯與Node.js的內置7.5

我做了一些研究，並嘗試了這些問題，但沒有成功的答案：

那麼有可能以任何方式用普通的CSS來實現這一點？如果沒有，我還會構建一些邏輯來填充頁腳上方的所有空白空間，直到頁面達到其最大大小。

來源

2017-02-28 Megajin

好的，這個解決方案非常容易出於某種奇怪的原因。不過，我已經改變了我的CSS從這個：

.docFooter{ 
    display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 
    width: 100%; 
    position: absolute; 
    bottom: 0; 
    padding-right: 2cm; 
    padding-bottom: 1cm; 
}

這樣：

display: -webkit-box; 
    display: -ms-flexbox; 
    display: flex; 
    -webkit-box-pack: justify; 
    -ms-flex-pack: justify; 
    justify-content: space-between; 
    width: 100%; 
    position: absolute; 
    top: 27.7cm !important; 
    padding-right: 2cm !important;

因爲我知道，一個A4頁面也不會超過29.7釐米很容易元素設爲底部，而使得它絕對定位從上面來跟top: 27.7cm

來源

2017-02-28 10:35:19 Megajin

在電子您有VH完全支持（見http://caniuse.com/#feat=viewport-units）。

只要使用這樣的事情：

<div id="page"></div> 
<div id="footer"></div> 


#footer { 
height: 30px; 
} 
#page { 
height: calc(100vh - 30px); //viewport height - footer height 
}

來源

2017-03-02 18:34:36 sbaaaang

打印：如何將頁面上的頁腳粘貼到底部？

回答

相關問題