时间戳

首页 > 解决方案 > 使用媒体打印时如何在纸张中设置身体高度[css]

css - 使用媒体打印时如何在纸张中设置身体高度[css]

问题描述

我不知道我在使用时如何设置身体的高度@media print。

我有一个很长的文件。我将每个页面设置为具有相同的页眉和页脚。

标题

@media print {
  position: fixed;
  top: 0;
}

页脚

@media print {
  position: fixed;
  bottom: 0;
}

如何将正文放在页眉和页脚之间？当我将数据放入纸中时，{Header body Footer} 部分会重叠。

标签： csshtmlmedia-queriescss-grid

解决方案

你可以在你的身体中定义一个网格并将你的元素放在上面：

HTML：

<body>
  <header></header>
  <main></main>
  <footer></footer>
</body>

CSS：

body {
  display: grid;      
  grid-template-rows: auto 1fr auto;
  min-height: 100vh; // use the full height
}
    header {
  grid-row: 1;
}

main {
  grid-row: 2;
}

footer {
  grid-row: 3;
}

如果您只想在打印期间显示页眉和页脚，只需添加以下内容将它们隐藏在屏幕上：

header, footer {
  display: none;
}

@media print {
  header, footer {
      display: block;
  }
}

如果您想使高度适应您的纸张尺寸而不是视口。您可以添加如下页面尺寸（A4 纸张尺寸示例）：

@page {
  size: A4;
  margin: 0;
}
@media print {
  html, body {
    width: 210mm;
    height: 297mm;
    min-height: 297mm;
  }
}

推荐阅读