html 页面内容与页脚重叠
问题描述 投票：0回答：1
我在同一个表中添加了大约 50 行。之后的内容与页脚重叠。 数据 15 显示，但数据 16 和数据 17 缺失
页脚应在底部的所有页面中可见。 示例：在医院打印出院摘要时，所有页面都有页脚。我试图实现但没有成功
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable Document with Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
padding: 0;
padding-bottom: 140px; /* Ensure enough space between table and footer */
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
min-height: 100vh;
}
.container {
width: 100%;
margin-bottom: 20px; /* Space between container and footer */
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin-top: 20px; /* Space between container and footer */
}
.table-wrapper {
overflow: hidden; /* Ensure table doesn't overlap footer */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
@media print {
.footer {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* Adjust height as needed */
visibility: visible !important; /* Ensure footer is visible on every printed page */
margin-top: 20px; /* Space between container and footer */
}
body {
padding-bottom: 500px; /* Adjust padding-bottom to create space for footer */
}
}
</style>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Example of a long table -->
<!-- Add more rows as needed -->
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 6</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 7</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 8</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 9</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 10</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 12</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 13</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 14</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 15</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 16</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 17</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 18</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 19</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 20</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 21</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 22</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 23</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 24</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 25</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 26</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 27</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 28</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 29</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 30</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Add more rows as needed -->
<!-- This table will automatically split across pages -->
</tbody>
</table>
</div>
</div>
<div class="footer">
Footer Content - This will appear on every printed page.
</div>
</body>
</html>
`
打印此网页时应该可以工作
1个回答
0
投票
投票
hi Use this for your solution
`<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Printable Document with Footer</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 50px;
padding: 0;
padding-bottom: 140px; /* Ensure enough space between table and footer */
display: grid;
grid-template-rows: auto 1fr auto; /* Header, Content, Footer */
min-height: 100vh;
}
.container {
width: 100%;
margin-bottom: 20px; /* Space between container and footer */
}
.footer {
background-color: #333;
color: #fff;
text-align: center;
line-height: 100px;
margin-top: 20px; /* Space between container and footer */
}
.table-wrapper {
overflow: hidden; /* Ensure table doesn't overlap footer */
}
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #ddd;
padding: 8px;
text-align: left;
}
@media print {
.footer {
display: block;
position: fixed;
bottom: 0;
width: 100%;
height: 100px; /* Adjust height as needed */
visibility: visible !important; /* Ensure footer is visible on every printed page */
margin-top: 20px; /* Space between container and footer */
}
body {
padding-bottom: 500px; /* Adjust padding-bottom to create space for footer */
}
}
</style>
</head>
<body>
<div class="container">
<div class="table-wrapper">
<table>
<thead>
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
</thead>
<tbody>
<!-- Example of a long table -->
<!-- Add more rows as needed -->
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 2</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 3</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 4</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 5</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 6</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 7</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 8</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 9</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 10</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 11</td>
<td>Data 12</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 12</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 13</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 14</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 15</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 16</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 17</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 18</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 19</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 20</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 21</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 22</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 23</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 24</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 25</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 26</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 27</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 28</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 29</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 30</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr><tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<tr>
<td>Data 1</td>
<td>Data 2</td>
<td>Data 3</td>
</tr>
<!-- Add more rows as needed -->
<!-- This table will automatically split across pages -->
</tbody>
</table>
</div>
</div>
</body>
<div class="footer">
Footer Content - This will appear on every printed page.
</div>
</html>`
最新问题
- 如何在kali linux终端中打开kali@kali [已关闭]
- 是否有 API 可以了解自定义受众是否已填充？
- 如何将图像放置在我想要的位置？
- 根据column3中的条件删除column1中的重复元素
- 具有独特值的RANDARRAY
- 滚动时 MFC 中的 BitBlt 问题：未绘制新的可见区域
- 在 Flask 3.0 中重写 JSON 编码器，json_encoder 已弃用？
- 如何在 Unity 2D 中从另一个对象的代码更改对象的比例
- 未在 AKS 中显示服务端点，并且标签和选择器不匹配
- C++ 未命名（匿名）命名空间定义
- 如何解析 HTML 电子邮件
- Azure 应用程序网关：更改公共 IP 零停机？
- 如何向Web Speech API添加标点符号？
- 如何在 Spring Boot REST API 中捕获 AccessDeniedException
- 模拟器在 android studio 最新版本中无法工作
- 在未命名的命名空间内外可以有两个具有相同名称的函数吗？
- 子文件夹中的 Ci4 路由
- 是否可以在不触发重组的情况下更改图像可组合项的大小
- 将简单的Python文本编码器转换为.exe文件以便与朋友和家人共享
- 为什么我需要刷新或转到另一个选项卡才能显示该字段？
© www.soinside.com 2019 - 2024. All rights reserved.