调整顶部，同时使用 CSS 保持底部位置答案

【问题标题】：Adjust top while maintaining bottom position with CSS调整顶部，同时使用 CSS 保持底部位置
【发布时间】：2013-03-11 13:31:33
【问题描述】：

我现在正在开发的网站旨在复制您可以打印的文档。有页眉、正文和页脚。这三个元素都使用 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>

【问题讨论】：

也许我理解错了，但你为什么不使用 margin-bottom:0.5in？
完全不相关，抱歉。你是我见过的第一个使用in 的人。有什么特别的原因吗？
@user2019515 我也在想同样的事情。还有什么奇怪的内联样式。这与 HTML5 或文字处理器有关吗？无论如何，我认为您应该阅读外部样式表并使用 em（或至少百分比）。要回答我认为是您的问题，粘页脚。
@AliBZ，重点是底部停留在原地，但是随着高度的增加，将div推高。
@user2019515，我正在尝试生成一个可以打印的页面，因此通过使用英寸我可以生成一个格式正确的页面。

标签： css word-processor

【解决方案1】：

研究CSS sticky footer 技术。

原理是这样的：

内容的底部内边距等于页脚的高度
页脚使用相对定位
页脚的上边距等于它自己的（取反的）高度

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

【讨论】：

【解决方案2】：

这本质上是一个粘性页脚。

CSS

.wrap { 
  min-height:100%;
  margin-bottom: -.4in; /* same as footer */
}
.push, #footer {
  height:.4in;
}

HTML

<div class="wrap">
 <div></div>
 <div></div>
 <div class="push"></div>
</div>
<div id="footer">

【讨论】：

【解决方案3】：

我建议您使用本机 javascript 或 jquery CSS 不是一种编程语言，但 javascript 将为您提供更多功能来测试所需条件

【讨论】：

我用 javascript 做了一个试验，结果证明它很容易工作。 ` h = $('.header').height(); f = $('.footer').height(); $('.footer').css('margin-top', '-'+(f/h)+'in'); `

【解决方案4】：

我不认为你正在寻找的东西可以只用 CSS 来完成，至少在 flexbox 模型得到更广泛的支持之前是这样。如果您使用的是 Chrome 24 或更高版本，您可以在 http://jsfiddle.net/2late2die/bNJZG/1/ 看到下面的代码。

.page {
  width:8in;
  height:10.5in;
  background:#fff;
  position:relative;
  margin:.5in auto;
  box-shadow:rgba(0,0,0,.2) 0 0 .1in;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: flex;
  -webkit-flex-flow: column;
  -moz-flex-flow: column;
  -ms-flex-flow: column;
  -ms-flex-direction: column;
  flex-flow: column;
}
.page .body {
  -webkit-flex: 1 0 auto;
  -moz-flex: 1 0 auto;
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
}

它基本上将页面的主体设置为一个 flexbox 项目，它可以伸展以占据页眉和页脚之间的整个垂直空间。但是，您仍然需要自己管理正文的高度，因为如果它超过页眉和页脚之间的剩余空间，它将溢出。

【讨论】：