Нижняя часть перекрывающегося тела

Question

У меня проблема с моим документом. Мне нужно добавить нижний колонтитул к нижней части каждой печатной страницы. Я попытался использовать печать @media и создать один основной div, который содержит 2 других divs (содержание и нижний колонтитул). У меня есть следующие 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> 

Однако, я все еще получаю колонтитул перекрывающийся основного документа при печати. Что я делаю неправильно и как это исправить, чтобы нижний колонтитул не перекрывался?

Chris

Answer 1

Вы можете использовать свойство CSS calc,

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

Вам не нужно будет основной DIV, если вы выбрали этот метод. Вот DEMO