我正在尝试编写一个很长的 HTML 页面，该页面在打印时包含一个显示“仅供官方使用 (FOUO)”的页脚。我将它绝对定位在页面底部，但页面的内容也下降了那么远，或者页脚重叠。我尝试设置我的@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 以便内容不会在页面底部重叠吗？
克里斯
小智 -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
}