如何修复页脚使其位于页面末尾？ （css 打印）
How to fix the footer to make it positioned at the end of the page? (css print)
我想在我网站印刷版的每一页上添加页眉和页脚，我使用了以下方法
@media print {
/* the parent container */
table.report-container {
page-break-after:always;
}
/* the parent container */
thead.report-header {
display:table-header-group;
}
/* the footer container */
tfoot.report-footer {
display:table-footer-group;
}
}
HTML代码如下：
<table class="report-container">
<!-- the header -->
<thead class="report-header">
<tr>
<th>
<h1>Header</h1>
</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td>
<!-- body -->
</td>
</tr>
</tbody>
<!-- the footer -->
<tfoot class="report-footer">
<tr>
<td>
<h1>Footer</h1>
</td>
</tr>
</tfoot>
</table>
这种方法的问题是，在最后一页中，页脚不会显示在页尾，除非页体已经填满整个页面。像下面这样：
我只需要找到一种方法来强制页脚始终显示在页面末尾。
您可以使用 %，因为它始终继承自 parent 元素。
如果您将 parent's 高度设置为 100% 并将页脚的 min-height 设置为 100%，那么它将起作用。
这是一个最小的可重现示例：
Html代码：
<header>
this is header part
</header>
<section>
this is content part
</section>
<footer>
this is footer part
</footer>
css代码
html,
body {
height: 100%;
}
header {
border: 2px solid blue;
text-align: center;
}
section {
border: 2px solid red;
min-height: 100%;
text-align: center;
}
footer {
border: 2px solid green;
text-align: center;
}
Note: Here section's direct parent is body.
试试这个 CSS 印刷版。
.report-footer{
position: fixed;
bottom: 0;
background:red;
display: block;
width:100%;
}
<table class="report-container">
<thead class="report-header">
<tr>
<th>
<h1>Header</h1>
</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td>
<!-- body -->
</td>
</tr>
</tbody>
<tfoot class="report-footer">
<tr>
<td>
<h1>Footer</h1>
</td>
</tr>
</tfoot>
</table>
足以确定 <table> 及其父项（最多 <body> and/or <html>）的尺寸，无需额外更改即可轻松完成:
html,
body,
table {
height: 100%;
}
您可以在 @media print { ... } 中使用此代码。
代码片段：
html,
body,
table {
height: 100%;
}
/* the parent container */
table.report-container {
page-break-after: always;
}
/* the parent container */
thead.report-header {
display: table-header-group;
}
/* the footer container */
tfoot.report-footer {
display: table-footer-group;
}
<body style="min-height: 5in;">
<table class="report-container">
<!-- the header -->
<thead class="report-header">
<tr>
<th>
<h1>Header</h1>
</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td>
<!-- body -->
</td>
</tr>
</tbody>
<!-- the footer -->
<tfoot class="report-footer">
<tr>
<td>
<h1>Footer</h1>
</td>
</tr>
</tfoot>
</table>
</body>
我想在我网站印刷版的每一页上添加页眉和页脚，我使用了以下方法
@media print {
/* the parent container */
table.report-container {
page-break-after:always;
}
/* the parent container */
thead.report-header {
display:table-header-group;
}
/* the footer container */
tfoot.report-footer {
display:table-footer-group;
}
}
HTML代码如下：
<table class="report-container">
<!-- the header -->
<thead class="report-header">
<tr>
<th>
<h1>Header</h1>
</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td>
<!-- body -->
</td>
</tr>
</tbody>
<!-- the footer -->
<tfoot class="report-footer">
<tr>
<td>
<h1>Footer</h1>
</td>
</tr>
</tfoot>
</table>
这种方法的问题是，在最后一页中，页脚不会显示在页尾，除非页体已经填满整个页面。像下面这样：
我只需要找到一种方法来强制页脚始终显示在页面末尾。
您可以使用 %，因为它始终继承自 parent 元素。
如果您将 parent's 高度设置为 100% 并将页脚的 min-height 设置为 100%，那么它将起作用。
这是一个最小的可重现示例：
Html代码：
<header>
this is header part
</header>
<section>
this is content part
</section>
<footer>
this is footer part
</footer>
css代码
html,
body {
height: 100%;
}
header {
border: 2px solid blue;
text-align: center;
}
section {
border: 2px solid red;
min-height: 100%;
text-align: center;
}
footer {
border: 2px solid green;
text-align: center;
}
Note:Here section's direct parent is body.
试试这个 CSS 印刷版。
.report-footer{
position: fixed;
bottom: 0;
background:red;
display: block;
width:100%;
}
<table class="report-container">
<thead class="report-header">
<tr>
<th>
<h1>Header</h1>
</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td>
<!-- body -->
</td>
</tr>
</tbody>
<tfoot class="report-footer">
<tr>
<td>
<h1>Footer</h1>
</td>
</tr>
</tfoot>
</table>
足以确定 <table> 及其父项（最多 <body> and/or <html>）的尺寸，无需额外更改即可轻松完成:
html,
body,
table {
height: 100%;
}
您可以在 @media print { ... } 中使用此代码。
代码片段：
html,
body,
table {
height: 100%;
}
/* the parent container */
table.report-container {
page-break-after: always;
}
/* the parent container */
thead.report-header {
display: table-header-group;
}
/* the footer container */
tfoot.report-footer {
display: table-footer-group;
}
<body style="min-height: 5in;">
<table class="report-container">
<!-- the header -->
<thead class="report-header">
<tr>
<th>
<h1>Header</h1>
</th>
</tr>
</thead>
<tbody class="report-content">
<tr>
<td>
<!-- body -->
</td>
</tr>
</tbody>
<!-- the footer -->
<tfoot class="report-footer">
<tr>
<td>
<h1>Footer</h1>
</td>
</tr>
</tfoot>
</table>
</body>