Question

我正在处理的网站旨在复制您可以打印的文档。有标题，正文和页脚。所有这三个元素都使用CSS来调整每个元素的边距和高度。

页脚高0.5英寸，必须距离页面底部至少0.5英寸，但不能超过页面底部。基于其他文字处理程序，如果页脚大于0.5英寸，则页脚会在页面上向上移动，使其保持0.5英寸边框。

这意味着身体会缩小，所以我设置了它（我认为），这样一个更大的页脚会收缩身体，这是预期的行为。

但是，我想要的是页脚调整页面位置的方式，使其始终距离页面底部至少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技术。

原则是：

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

结果是页脚与内容的填充重叠。由于大小匹配重叠使得页脚“粘”到内容结束的位置。

Answer 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">

Answer 3

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

Answer 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项目，该项目会拉伸以占据页眉和页脚之间的整个垂直空间。然而，你仍然需要自己管理身体的高度，因为如果它超过页眉和页脚之间留下的空间，它将会溢出。

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

4 个答案: