解决Bulma导航栏打印PDF时覆盖内容的问题

我正在制作一份研究报告，将报告保存为PDF时，导航栏会覆盖内容。如何避免这种情况？
我不想在打印时隐藏导航栏，但它们不应覆盖内容。

当前使用的导航栏代码：

<!-- top ribbon -->
  <nav id="navitop" class="navbar is-fixed-top">
    <div id="topc" class="columns">
      <div class="column is-12">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-4">
          RESEARCH ONLY - <u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
    </div>
  </nav>

  <!-- bottom ribbon -->
  <nav id="navibottom" class="navbar is-fixed-bottom">
    <div id="botc" class="columns is-gapless is-vcentered">
      <div class="column is-4">
        {{ meta.readable_id }}
      </div>
      <div class="column is-4">
        <!-- disclaimer -->
        <h1 class="title disclaimer is-6">
          RESEARCH ONLY <br /><u>NOT</u> FOR CLINICAL USE
        </h1>
        <!-- disclaimer -->
      </div>
      <div class="column is-4">
        {{ meta.timestamp }}
      </div>
    </div>
  </nav>

解决方案 #

你用的is-fixed-top和is-fixed-bottom属于固定定位类，浏览器默认不会在打印/PDF导出时为这类元素预留空间，导致内容被覆盖。可以通过以下两种方式解决：

1. 给主内容添加匹配导航栏高度的内边距 #

先通过浏览器开发者工具确认顶部、底部导航栏的实际高度，然后给页面主内容容器添加对应内边距，同时在打印样式中保留该设置：

/* 页面正常显示时的样式 */
.main-content {
  padding-top: 80px; /* 替换为顶部导航栏实际高度 */
  padding-bottom: 60px; /* 替换为底部导航栏实际高度 */
}

/* 打印/PDF导出专用样式 */
@media print {
  .main-content {
    padding-top: 80px !important;
    padding-bottom: 60px !important;
  }
  #navitop, #navibottom {
    position: fixed !important;
    z-index: 999;
  }
}

2. 用CSS打印页面规则预留边距 #

直接在打印样式中设置@page规则，为页面顶部、底部预留足够空间，同时调整导航栏定位：

@media print {
  @page {
    margin-top: 80px; /* 顶部预留导航栏高度 */
    margin-bottom: 60px; /* 底部预留导航栏高度 */
  }
  
  #navitop {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
  }
  
  #navibottom {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
  }
  
  body {
    margin-top: 80px;
    margin-bottom: 60px;
  }
}

注意：所有数值需替换为你导航栏的实际高度，确保内容和导航栏完全不重叠。

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