gpt4 book ai didi

html - 正文内容覆盖页脚

转载 作者:行者123 更新时间:2023-11-28 02:53:27 26 4
gpt4 key购买 nike

我正在使用 html 制作稍后需要打印的页面。每个页面都有一个固定的页脚。碰巧正文内容与页脚重叠。正文内容不应丢失下一页的信息。

根据我所做的搜索,页脚不如正文重要。我尝试在页脚上放置 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>&nbsp;</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>

最佳答案

好的,首先:您的 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>&nbsp;</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>

关于html - 正文内容覆盖页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46562989/

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