如何固定页脚使其位于页面末尾？ （CSS 打印）

问题描述 投票：0回答：3

我想在我网站的打印版本的每页上添加页眉和页脚，我使用了以下方法

@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>

这种方法的问题是，在最后一页中，页脚不会显示在页面末尾，除非页面主体已经填满整个页面。像下面这样： enter image description here

我需要的只是找到一种方法来强制页脚始终显示在页面末尾。

html css css-position web-frontend css-print
3个回答
1
投票

按照您使用的方式在打印中尝试此 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>

0
投票

您可以使用 

%
，因为它始终继承自 
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:
这里section的直接父级是body。

0
投票

确定 

<table>
及其父级（最多 
<body>
和/或 
<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>

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.