javascript 带有报表页眉和粘性页脚div的媒体打印查询

cld4siwp  于 2023-10-14  发布在  Java
关注(0)|答案(1)|浏览(93)

我一直在努力寻找最好的方法,让我的页脚div总是“粘”在页面的底部,就在我的content-wrap div下面;然而,在某些情况下,这个页脚最终会上下浮动(取决于内容 Package div中图像的高度)。
注:页脚似乎总是粘在底部之前,单击打印,但随后打印预览可能会有所不同(即,页脚并不总是粘在底部)。
下面是一个框架的HTML/CSS/JavaScript,你会看到在完整的项目,我已经张贴-
https://stackblitz.com/edit/js-atmmzu?file=index.js
我们有一个section标记,下面是一个article标记。每篇文章中都有一个content-wrap,其中包含rept-headerimg标记。在content-wrap下面,我们有rept-footer

<section id="articles">
<article>
  <div class="content-wrap">
    <div class="rept-header">
      <div class="pat-header proofsheet-table">
        ...
      </div>          
    </div>
    <img src="..." />
  </div>
  <div class="rept-footer">
    <div><img height="15" width="50" src="...png" /></div>
    <div>Page 1 of 1</div>
    <div>&nbsp;</div>
  </div>
</article>

我不喜欢的是我们在css中定位页脚的方式:

.rept-footer {
  margin-top: 14%;
}

我相信有一种更优化的方法来定位页脚--在打印时它总是落在页面的底部。
任何建议都很感激。
谢谢.

mefy6pfw

mefy6pfw1#

为了确保页脚始终粘在页面底部,您可以使用CSS Flexbox。

<body>
  <section id="articles">
    <!-- Your articles here -->
  </section>

  <footer class="rept-footer">
    <div><img height="15" width="50" src="...png" /></div>
    <div>Page 1 of 1</div>
    <div>&nbsp;</div>
  </footer>
</body>
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh; /* This ensures the body takes up at least the full height of the viewport */
}

#articles {
  flex-grow: 1; /* This allows the articles section to grow and take up remaining space */
}

.rept-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background-color: #f0f0f0; /* Optional background color */
  padding: 10px;
}

你必须根据你的具体设计偏好来调整风格。

相关问题