我一直在努力寻找最好的方法，让我的页脚 div 始终“粘”在页面底部，就在我的
content-wrap注意。在单击“打印”之前，页脚似乎始终粘在底部，但打印预览可能会有所不同（即页脚并不总是粘在底部）。
下面是 HTML/CSS/JavaScript 的框架，您将在我发布的完整项目中看到 -
https://stackblitz.com/edit/js-atmmzu?file=index.js
我们有一个
sectionarticlecontent-wraprept-headerimgrept-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> </div>
</div>
</article>
我不喜欢的是我们在 CSS 中定位页脚的方式：
.rept-footer {
margin-top: 14%;
}
我相信有一种更优化的方法来定位页脚 - 打印时它总是落到页面底部。
如有任何建议，我们将不胜感激。
谢谢。
为了确保页脚始终粘在页面底部，您可以使用 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> </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;
}
您必须根据您的具体设计偏好调整样式。