当我在 Chrome 和 IE 上打印时如何修复和重复每个页面底部的内容

Posted 2023-03-06

【中文标题】当我在 Chrome 和 IE 上打印时如何修复和重复每个页面底部的内容

【英文标题】：How to fix and repeat a content at bottom of every page when I print at Chrome and IE

【发布时间】：2021-04-18 01:35:09

【问题描述】：

what I want

当我在 Chrome 和 IE 上打印时，我想修复并在每页底部重复一个蓝色部分。我试过@page @bottom-center ... 和display:fixed; bottom:0;。但它不起作用。有没有其他办法？

【问题讨论】：

使用 flexbox 布局或网格布局将容器固定在页面底部

【参考方案1】：

要为页面提供漂亮的布局，您需要使用flexbox 布局或grid 布局。

您的案例的 flexbox 布局如下所示

* 
  margin: 0;
  padding: 0;
  box-sizing: border-box;


.container 
  height: 100vh;
  /*important*/
  display: flex;
  flex-direction: column;
  justify-content: flex-end;


.footer 
  height: 100px;
  background: cyan;

<div class="container">
  <div class="footer">
  </div>
</div>