html – 如何使用固定页眉和页脚分隔多个页面的正文内容

前端之家收集整理的这篇文章主要介绍了html – 如何使用固定页眉和页脚分隔多个页面的正文内容前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我有三个单独的部分作为标题,正文和页脚来创建pdf.

标题部分将始终位于每个页面的顶部,它将被修复.

______________________
|        header        |
|______________________|

问题是身体内容,如果内容很大,会去第二页.

______________________
|                      |
|                      |
|        body          |
|                      |
|                      |
|______________________|

页脚部分将始终在每个页面底部,它也将修复.

______________________
|        footer        |
|______________________|

所以如果内容很大,如果创建了两个页面,那么我应该得到两个页面

______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body Part1    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|

______________________
|        header        |
|______________________|
|                      |
|                      |
|        Body part2    |
|                      |
|                      |
|______________________|
|        footer        |
|______________________|

我试着用table format,它正在为标题内容,但不是为页脚工作.页脚仅在第二页的底部而不是第一页.

我正在使用laravel dompdf

任何帮助将赞赏.

解决方法

HTML假定一个不间断的不间断的元素序列,而打印的页面需要将该内容分割成多个部分.如果没有告诉它,则最好的解释器是将元素分离到页面上,以便它们大部分适合单个页面.

This very exhaustive article on SmashingMagazine会告诉你很多关于如何使用CSS设计HTML进行打印.

最重要的是对于你的问题,它会详细说明@page区域on a tidy sheet.相关的你可能会是顶级中心和底层中心的地区(不像你可能认为看到文件,可能会很好地延伸到整个宽度文件).

使用这些区域,您可以通过CSS定义页眉和页脚,如果您正在设计一本书,甚至可以根据它们的折叠边来对其进行风格化.这些工作通过直接在CSS中添加内容,因此您的HTML不需要任何标记.

/* print a centered title on every page */
@top-center {
  content: "Title";
  color: #333;
  text-align: center;
}

/* print the title on the left side for left-hand pages,and vice versa */
@page:left {
  @top-left {
    content: "Title";
    color: #333;
  }
}
@page:right {
  @top-right {
    content: "Title";
    color: #333;
  }
}

虽然你使用laravel是一个非问题,但是我没有浏览器会打印这些区域,所以对于常规的打印样式表来说,这不是一个实用的方法.

虽然您可以使用CSS做很多工作,但您可能会发现这些内容过于复杂,无法以上述方式创建.在这种情况下,您可以使用具有position:fixed属性的元素,它将渲染在每个页面的顶部/底部,具体取决于您的风格,例如:

@media print {
  header {
    position: fixed;
    top: 0;
  }
  footer {
    position: fixed;
    bottom: 0;
  }
}

HTML:

<body>
  <header>
      above the content on screen,and on the top of every printed page
  </header>
  <main>
      content that is flowing and behaving as you would expect it
  </main>
  <footer>
      below the content on screen,and on the bottom of every printed page
  </footer>
</body>
原文链接:https://www.f2er.com/html/230969.html

猜你在找的HTML相关文章