WeasyPrint无法将页脚固定在A4页面底部问题求助

你的问题出在只定义了@page的页脚位置，但没让内容区撑满页面高度，同时缺少页脚的关键定位属性。试试下面的完整方案：

第一步：调整HTML结构（Jinja模板里的布局） #

确保页面有明确的内容区和页脚容器：

<html>
<body>
  <div class="content">
    <!-- 你的表格内容，由Jinja渲染 -->
    {{ table_content }}
  </div>
  <footer class="page-footer">
    <!-- 页脚内容，比如页码、版权信息 -->
    第<span class="page-number"></span>页 / 共<span class="total-pages"></span>页
  </footer>
</body>
</html>

第二步：添加完整CSS样式 #

把下面的样式加到你的模板样式表中：

/* 屏幕显示时的基础布局，让页脚固定在窗口底部 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

.content {
  flex: 1; /* 自动填充剩余空间，把页脚挤到底部 */
  padding: 20px; /* 避免内容贴边，按需调整 */
}

.page-footer {
  height: 50px; /* 页脚固定高度，按需修改 */
  text-align: center;
  padding: 10px;
  border-top: 1px solid #ccc;
}

/* 打印专用样式，适配A4纸 */
@media print {
  @page {
    size: A4;
    margin: 20mm; /* 留足打印边距，别设0，不然内容会被打印机裁切 */
    @bottom-center {
      content: element(footer); /* 调用标记为running的footer元素 */
    }
    /* 可选：添加页码 */
    @top-right {
      content: "第 " counter(page) " 页 / 共 " counter(pages) " 页";
    }
  }

  body {
    height: auto;
    position: relative;
  }

  .page-footer {
    position: running(footer); /* 核心！把页脚注册为可被@page调用的元素 */
    bottom: 0;
    width: 100%;
    margin: 0;
  }

  /* 防止内容和页脚重叠 */
  .content {
    margin-bottom: 60px; /* 值等于页脚高度+内边距，按需调整 */
  }

  /* 隐藏屏幕显示的页码，用@page的页码 */
  .page-number, .total-pages {
    display: none;
  }
}

关键注意点 #

• 必须给页脚加position: running(footer);，这是CSS Paged Media的专属属性，没有它@page找不到要放置的页脚元素
• @page的margin别设为0，实际打印机都有最小打印边距，设0会导致页脚或内容被裁掉
• 用flex布局处理屏幕显示的情况，打印时再通过@media print适配，兼顾两种场景

内容的提问来源于stack exchange，提问作者Chandu Kiran