頁腳重疊身體

Question

我的文檔有問題。我只需要在每個打印頁面的底部添加一個頁腳。我曾嘗試使用@media print並創建一個包含2個其他div（內容和頁腳）的主div。 我有以下的CSS：

@media print { 
    html, body { 
     height: 100%; 
    } 
    #wrap { 
     min-height: 100%; 
    } 
    #main { 
     padding-bottom: 50px; 
    } 
    #myFooter { 
     margin-top: 50px; 
    } 
    #printFooter { 
     position: fixed; 
     text-align: center; 
     bottom: 0; 
     margin: -50px auto 0 auto 
    } 
} 

，並具有以下（簡化版本）對我的身體：

<div id="wrap"> 
     <div id="main"> 
      <table width="100%"> 
       <tr> 
        <td>blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah 
blah blah blah blah </td> 
       </tr> 
      </table> 
     </div> 
     <div id="myFooter"> 
      <table width="100%"> 
       <tr> 
        <td id="printFooter"><div>For Official Use Only (FOUO)</div></td> 
       </tr> 
      </table> 
     </div> 
    </div> 

不過，我仍然得到頁腳主文檔重疊當我打印。我做錯了什麼，我該如何解決這個問題，使頁腳不會重疊？

克里斯

Answer 1

您可以使用CSS calc財產，

#wrap { 
     height: calc(100% - px); 
    } 

你不會需要主要的div，如果你選擇了這種方法。 這裏是一個DEMO