页脚重叠身体

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