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

页脚重叠的身体

1 个答案: