在頁面底部頁面上放置頁腳

Question

我想了幾天，想知道如何解決這個問題：

我有一個報告（完整的HTML5 + CSS3）與一些頁面。報告按章節劃分，每個部分都有一個標題，一個內容和一個頁腳。所以，一節基本上是由這樣的：

<section> 
    <header></header> 
    <div>CONTENT</div> 
    <footer></footer> 
</section> 

的問題是，頁腳內容結束（見圖1）當打印面積（按Ctrl + P），當它必須保持在底部之後來到的部分（見圖2）...

我不是一個真正的前端主，它已成爲一種痛苦實現！ 你能幫我嗎？ 謝謝！

圖1：

圖2：

Answer 1

去像這樣的東西：

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

    @page: last { 
     #footer { 
      display: block; 
     } 
    } 
} 

Answer 2

你應該使用絕對位置頁腳

header{ 
 
    background-color:yellow; 
 
    height: 50px; 
 
} 
 

 
footer{ 
 
    background-color:red; 
 
position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
    height: 50px; 
 
    width: 100%; 
 
    overflow:hidden; 
 
}

<section> 
 
    <header>Header</header> 
 
    <div>CONTENT</div> 
 
    <footer>Footer</footer> 
 
</section>