css - 使用 CSS 调整顶部，同时保持底部位置

Question

我现在正在开发的一个网站旨在复制您可以打印的文档。有页眉、正文和页脚。这三个元素都使用 CSS 来调整每个元素的边距和高度。

页脚高度为 0.5 英寸，距离页面底部至少 0.5 英寸，但不能超过该距离。根据其他文字处理器，如果页脚大于 0.5 英寸，页脚会在页面上向上移动，以保持 0.5 英寸的边框。

这意味着 body 会收缩，所以我已经设置(我认为)以便较大的页脚会收缩 body，这是预期的行为。

但是，我想要的是一种让页脚调整其在页面上的位置的方法，以便它始终距离页面底部至少 0.5 英寸。

请注意，我希望该解决方案适用于一个文档的任意数量的页面，因此我不能使用固定位置。

我包含了我的演示代码，只要高度足够小，它就可以工作。

<div style="height: 9in;
padding-left: 1in;
padding-right: 1in;
padding-top: 0.5in;
padding-bottom: 0.5in;
background-color: #eee;
margin-top: -0.08in;
margin-left: -0.08in;">
            <div style="height: 0.5in"> Nick 1 </div>
            <div style="max-height: 9in; height: 9in;">I love stuff.</div>
            <div style="min-height: 0.5in; height: 0.5in; margin-top: 0.5in;">Footer</div>
</div>

Answer 1

查看 CSS sticky footer技术。

原理是这样的:

• 内容的底部填充等于页脚的高度
• 页脚使用相对定位
• 页脚的上边距等于它自己的(否定的)高度

结果是页脚与内容的填充重叠。由于大小匹配重叠，因此页脚“粘”在内容结束的位置。