Chrome打印Bootstrap 4页面时页眉页脚被截断问题求助

我之前也踩过这个坑，Bootstrap 4确实在打印样式上做了个容易踩雷的调整，导致Chrome默认的页眉页脚（日期、页面标题、URL这些内容）被页面内容直接截断了。下面是具体的解决办法和原因分析：

1. 快速修复方案 #

在你的页面CSS里添加专门的打印样式，给打印页面设置合适的边距，让浏览器的默认页眉页脚有足够的显示空间：

@media print {
  @page {
    margin: 1cm; /* 可以根据需求调整，比如上下边距设大一点：margin: 1.5cm 1cm; */
  }
  body {
    margin: 0; /* 避免和@page的边距叠加导致内容过度内缩 */
  }
}

2. 问题根源 #

Bootstrap 4的默认打印样式里，@page规则被设置成了margin: 0，这会直接覆盖Chrome浏览器默认的打印边距。而Chrome的页眉页脚是渲染在页面边距区域的，当边距被设为0时，页面内容会顶到页面边缘，自然就把页眉页脚挡住了。Bootstrap 3没有这个设置，所以不会出现这个问题。

你可以自己验证一下：打开Bootstrap 4的CSS文件，搜索@page，能看到这段代码：

@page {
  size: a3;
}
@page {
  margin: 0;
}

就是这个margin: 0在搞事情。

3. 额外优化提示 #

如果你的页面有固定定位的元素（比如顶部导航栏），打印时它们也可能会遮挡内容，建议一起在打印样式里隐藏它们：

@media print {
  .fixed-top, .fixed-bottom {
    display: none !important;
  }
}

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