Question

我正在尝试编写一个很长的HTML页面，在打印时，它包含一个页脚，上面写着＆＃34;仅供官方使用（FOUO）＆＃34;。我把它完全定位在页面的底部，但页面的内容也会下降到那么远，或页脚重叠。我已经尝试设置我的@media打印CSS，使页面的主要内容比页面的整个高度小50个像素，但这并没有做任何事情。这是我的CSS：

@media print {
#content {
    max-height: calc(100% - 50px);
}
#printFooter {
    position: fixed;
    text-align: center;
    bottom: 0;
    margin: 0 auto 0 auto
}

}

这是一个HTML文件，其格式如下：

<body>
    <div id="content">Lots of text in this div to make it extend beyond first page</div>
    <div id="printFooter">For Official Use Only (FOUO)</div>
</body>

有人可以帮我弄清楚如何设置我的CSS，以便内容不会在页面底部重叠吗？

克里斯

Answer 1

我发现只有这个解决方案，但我们丢失了一些文字（

<body>
    <div id="content">Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first page</div>
    <div id="printFooter">For Official Use Only (FOUO)</div>
</body>

@media print {
    #printFooter {
    position: fixed;
    text-align: center;
    bottom: 0;
    width: 100%;
    background: #fff;
    margin: 0 auto 0 auto
}

页脚重叠打印页面中的内容

1 个答案: