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

cld4siwp 于 2023-10-14 发布在 Java

关注(0)|答案(1)|浏览(94)

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

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

JavaScript

来源：https://stackoverflow.com/questions/77288492/media-print-query-with-report-header-and-sticky-footer-divs

1条答案

按热度按时间

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;
}

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

赞(0）回复(0）举报 2023-10-14

我来回答

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

1条答案

相关问题

热门标签

最新问答