英文:
How to create a footer that stays at the bottom of the print screen?
问题
我正在尝试创建一个页脚,该页脚在每个打印的页面(A4大小)上都会重复显示,而不会重叠页面的内容。我尝试了许多变种,但要么页脚无法固定在底部并随内容滚动,要么会重叠内容。
<style>
@media print {
#footer {
position: fixed;
bottom:0;
color: black;
}
}
</style>
<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
<thead style="display: table-header-group;">
<tr>
<td>
Header
</td>
</tr>
</thead>
<tbody style="padding: 20px">
<tr><td>
<div class="content">
<h1>Page Content</h1>
<div id="lines-container"></div>
<script>
// Get the lines container element
var linesContainer = document.getElementById("lines-container");
// Generate 40 lines
for (var i = 0; i < 80; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
</script>
</div>
</td></tr>
</tbody>
<tfoot id="footer">
<tr>
<td colspan="99" style="border-top: solid 2px #9fdba9;">
<table>
<tr>
<td colspan="99" style="vertical-align: middle;">
<img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Address: </div>
<div>Tel: </div>
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div> Email: </div>
<div> Website: </div>
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
我的问题是,当我按Ctrl + P进行打印时,页脚会重叠在内容上。
英文:
I am trying to create a footer that get repeated on every printed page (size A4) without overlaping the contet of the page. I tried many varaions either the footer does not stick to bottom and follows the content or it overlaps the content.
<style>
@media print {
#footer {
position: fixed;
bottom:0;
color: black;
}
}
</style>
<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
<thead style = "display: table-header-group;">
<tr>
<td>
Header
</td>
</tr>
</thead>
<tbody style="padding: 20px">
<tr><td>
<div class="content">
<h1>Page Content</h1>
<div id="lines-container"></div>
<script>
// Get the lines container element
var linesContainer = document.getElementById("lines-container");
// Generate 40 lines
for (var i = 0; i < 80; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
</script>
</div>
</td></tr>
</tbody>
<tfoot id="footer">
<tr>
<td colspan="99" style="border-top: solid 2px #9fdba9;" >
<table>
<tr>
<td colspan="99" style="vertical-align: middle;">
<img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Address: </div>
<div>Tel: </div>
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div> Email: </div>
<div> Website: </div>
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
My issuse is the footer overlapaing the content when I hit Ctrl + P to print it.
答案1
得分: 0
你可以尝试使用 position: sticky
而不是 position: fixed
。
编辑
我找到了另一种解决方案,使用一个不可见的 tfoot 作为空间占位。你可以在下面检查这个解决方案。
#footer,
#footer-space {
height: 50px;
}
#footer {
position: fixed;
bottom: 0;
}
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button type="button" onClick="window.print()">
PRINT ME!
</button>
<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
<thead style="display: table-header-group;">
<tr>
<td>
Header
</td>
</tr>
</thead>
<tbody style="padding: 20px">
<tr>
<td>
<div class="content">
<h1>Page Content</h1>
<div id="lines-container"></div>
<script>
// Get the lines container element
var linesContainer = document.getElementById("lines-container");
// Generate 40 lines
for (var i = 0; i < 80; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
</script>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!-- 占位符,用于固定位置的页脚 -->
<div id="footer-space"></div>
</td>
</tr>
</tfoot>
<tfoot id="footer">
<tr>
<td colspan="99" style="border-top: solid 2px #9fdba9;">
<table>
<tr>
<td colspan="99" style="vertical-align: middle;">
<img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Address:</div>
<div>Tel:</div>
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Email:</div>
<div>Website:</div>
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
英文:
You can try position: sticky
instead of position: fixed
.
Edit
I find some another solution using one tfoot as invisible space. You can check this below.
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
#footer,
#footer-space {
height: 50px;
}
#footer {
position: fixed;
bottom: 0;
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css" />
</head>
<body>
<button type="button" onClick="window.print()">
PRINT ME!
</button>
<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
<thead style="display: table-header-group;">
<tr>
<td>
Header
</td>
</tr>
</thead>
<tbody style="padding: 20px">
<tr>
<td>
<div class="content">
<h1>Page Content</h1>
<div id="lines-container"></div>
<script>
// Get the lines container element
var linesContainer = document.getElementById("lines-container");
// Generate 40 lines
for (var i = 0; i < 80; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
</script>
</div>
</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>
<!--place holder for the fixed-position footer-->
<div id="footer-space"></div>
</td>
</tr>
</tfoot>
<tfoot id="footer">
<tr>
<td colspan="99" style="border-top: solid 2px #9fdba9;">
<table>
<tr>
<td colspan="99" style="vertical-align: middle;">
<img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Address: </div>
<div>Tel: </div>
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div> Email: </div>
<div> Website: </div>
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!-- end snippet -->
答案2
得分: 0
我尝试了一切,但没有成功,所以我编辑了您的脚本并添加了<div id="lines-container-2"></div>
并给它添加了margin-top:60px;
,您可以在ctrl+p中检查结果
@media print {
#footer {
position: fixed;
bottom: 0;
color: black;
}
#lines-container {
height: 790px;
overflow: hidden;
}
#lines-container-2 {
height: 790px;
overflow: hidden;
margin-top: 60px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="White.css">
<title>Document</title>
</head>
<body>
<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
<thead style="display: table-header-group;">
<tr>
<td>
Header
</td>
</tr>
</thead>
<tbody style="padding: 20px">
<tr><td>
<div class="content">
<h1>Page Content</h1>
<div id="lines-container"></div>
<div id="lines-container-2"></div>
<script>
// Get the lines container element
var linesContainer = document.getElementById("lines-container");
// Generate 40 lines
for (var i = 0; i < 44; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
// Get the lines container element
var linesContainer = document.getElementById("lines-container-2");
// Generate 40 lines
for (var i = 44; i < 80; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
</script>
</div>
</td></tr>
</tbody>
<tfoot id="footer">
<tr>
<td colspan="99" style="border-top: solid 2px #9fdba9;">
<table>
<tr>
<td colspan="99" style="vertical-align: middle;">
<img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Address: </div>
<div>Tel: </div>
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div> Email: </div>
<div> Website: </div>
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
英文:
I tried everything but didn't work so I edited your script and added <div id="lines-container-2"></div>
and gave it margin-top:60px;
that you can check the result in ctrl+p
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-css -->
@media print {
#footer {
position: fixed;
bottom:0;
color: black;
}
#lines-container {
height:790px;
overflow: hidden;
}
#lines-container-2 {
height:790px;
overflow: hidden;
margin-top:60px;
}
}
<!-- language: lang-html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="White.css">
<title>Document</title>
</head>
<body>
<table style="width: 100%; print-color-adjust: exact; -webkit-print-color-adjust: exact">
<thead style = "display: table-header-group;">
<tr>
<td>
Header
</td>
</tr>
</thead>
<tbody style="padding: 20px">
<tr><td>
<div class="content">
<h1>Page Content</h1>
<div id="lines-container"></div>
<div id="lines-container-2"></div>
<script>
// Get the lines container element
var linesContainer = document.getElementById("lines-container");
// Generate 40 lines
for (var i = 0; i < 44; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
// Get the lines container element
var linesContainer = document.getElementById("lines-container-2");
// Generate 40 lines
for (var i = 44; i < 80; i++) {
var line = document.createElement("div");
line.textContent = "Line " + (i + 1);
linesContainer.appendChild(line);
}
</script>
</div>
</td></tr>
</tbody>
<tfoot id="footer">
<tr>
<td colspan="99" style="border-top: solid 2px #9fdba9;" >
<table>
<tr>
<td colspan="99" style="vertical-align: middle;">
<img src="http://127.0.0.1:5566/view-attachment?N0b3J5" alt="SVG Image"
style="width: 100px; height: 75px; padding: 2px; padding-right: 20px;">
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div>Address: </div>
<div>Tel: </div>
</td>
<td style="vertical-align: middle; text-align: left; padding: 2;">
<div> Email: </div>
<div> Website: </div>
</td>
</tr>
</table>
</td>
</tr>
</tfoot>
</table>
</body>
</html>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论