页脚在打印页面上重叠内容

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

克里斯

来源

2017-02-16 Chris

你想获得在最底层的每个打印页底部的页脚，或仅有1个页脚最后一页？ – zgood

对我来说，它完美地工作https://plnkr.co/edit/wkINSBwXfCWGqi4uwTVd?p=preview –

我想要在每个打印页面的底部获得页脚，但无法让它工作。如果我打印预览，它不会显示在所有页面上。 – Chris

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

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

来源

2017-02-16 20:07:41 grinmax

否则这可以通过一些divs来控制，这些divs会在打印版本中显示，并且会进行额外的填充 – grinmax

我刚刚尝试了上面的代码，并添加了一个。我添加了一个边界，并填充到介质打印内的内容部分： [代码] @media打印{ \t \t \t \t＃内容{ \t \t \t \t \t填充底：50像素; \t \t \t \t \t border-bottom：1px solid; \t \t \t \t} \t \t \t \t #printFooter { \t \t \t \t \t位置是：固定; \t \t \t \t \t text-align：center; \t \t \t \t \t bottom：0; \t \t \t \t \t width：100％; \t \t \t \t \t background：#fff; \t \t \t \t \t保证金：0汽车0汽车 \t \t \t \t} \t \t \t} [/代码] 我得到页脚在每个页面的底部，但在第一页上，它与重叠最后一行文字的中间。而边框只出现在第二页上。 – Chris

页脚在打印页面上重叠内容

回答

相关问题