我正在使用html制作我需要稍后打印的页面。每个页面都有一个固定的页脚。碰巧身体内容与页脚重叠。身体内容不应该丢失下一页的信息。
通过我的搜索，页脚不如身体重要。我尝试在页脚上放置ID和ID，但它没有解决问题。
@media print {
#footer {
display: block;
position: fixed;
bottom: 0;
height: calc(100vh - 1000px);
}
}
#container {
margin-bottom: 2em;
min-height: 100%;
clear: both;
padding: 0 2em;
text-align: justify;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<table width="100%">
<thead>
<tr>
<th style="width:100%">page header</th>
</tr>
<tr>
<th>
<hr style="color:#000080" />
</th>
</tr>
</thead>
<tfoot>
<tr>
<td width="100%">
<table width="100%" border="0">
<tr>
<td colspan="4"><br> </td>
</tr>
</table>
</tfoot>
<tbody id="container">
<tr>
<td>
<div>
<p>
my text is here and much longeur, i just can't copy it here, you can try a longer text to see
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" id="footer" width="100%">
<tr>
<td width="100%">
footer text
</td>
</tr>
</table>
</html>
答案 0 :(得分：0)
好的，首先：HTML中存在很多错误。有些部分我甚至不理解他们应该做什么。我现在无法解决所有问题，抱歉。你为什么要使用桌子？用桌子摆放是很奇怪的。您是否在Word中设计了它并将其导出为HTML？
所以在下面，我仅修复了页脚问题。它不必是position: fixed;和display: block;。实际上，对于打印来说，将任何东西的位置固定到屏幕上是没有意义的。
我希望无论如何都有帮助...
@media print {
#footer {
height: calc(100vh - 1000px);
}
}
#container {
margin-bottom: 2em;
min-height: 100%;
clear: both;
padding: 0 2em;
text-align: justify;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<table width="100%">
<thead>
<tr>
<th style="width:100%">page header</th>
</tr>
<tr>
<th>
<hr style="color:#000080" />
</th>
</tr>
</thead>
<tfoot>
<tr>
<td width="100%">
<table width="100%" border="0">
<tr>
<td colspan="4"><br> </td>
</tr>
</table>
</tfoot>
<tbody id="container">
<tr>
<td>
<div>
<p>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
long text<br>
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" id="footer" width="100%">
<tr>
<td width="100%">
footer text
</td>
</tr>
</table>
</html>
答案 1 :(得分：0)
如果您正在寻找下面代码段的粘性页脚检查。在这里，我将＃footer＆＃39; s height设置为20px，将＃container＆＃39; s padding-bottom设置为相同的20px。所以它不会隐藏任何内容。
#footer {
display: block;
position: fixed;
bottom: 0;
height: 20px;
background-color: #ccc;
}
#container {
margin-bottom: 2em;
min-height: 100%;
clear: both;
padding: 0 2em;
text-align: justify;
padding-bottom: 20px;
}<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<table width="100%">
<thead>
<tr>
<th style="width:100%">page header</th>
</tr>
<tr>
<th>
<hr style="color:#000080" />
</th>
</tr>
</thead>
<tfoot>
<tr>
<td width="100%">
<table width="100%" border="0">
<tr>
<td colspan="4"><br> </td>
</tr>
</table>
</tr>
</tfoot>
<tbody id="container">
<tr>
<td>
<div>
<p>
my text is here and much longeur, i just can't copy it here, you can try a longer text to see
</p>
<p>
my text is here and much longeur, i just can't copy it here, you can try a longer text to see
</p>
<p>
my text is here and much longeur, i just can't copy it here, you can try a longer text to see
</p>
<p>
my text is here and much longeur, i just can't copy it here, you can try a longer text to see
</p>
<p>
my text is here and much longeur, i just can't copy it here, you can try a longer text to see
</p>
</div>
</td>
</tr>
</tbody>
</table>
<table border="0" id="footer" width="100%">
<tr>
<td width="100%">
footer text
</td>
</tr>
</table>
</html>