gpt4 book ai didi

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

转载 作者:太空宇宙 更新时间:2023-11-04 13:05:35 27 4
gpt4 key购买 nike

我正在尝试编写一个长的 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 以使内容不会在页面底部重叠吗?

克里斯

最佳答案

我只找到了这个解决方案,但是我们丢失了一些文本(

<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
}

关于html - 打印页面中的页脚重叠内容,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/42282756/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com