调整顶部，同时保持底部的位置与CSS

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页脚粘贴技术。

原则如下:

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

结果是页脚与内容的内边距重叠。由于大小匹配，重叠使页脚"粘"在内容结束的地方

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完成，至少在flexxbox模型得到更广泛的支持之前。如果你使用的是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;
}

它基本上将页面主体设置为伸缩项，拉伸到占据页眉和页脚之间的整个垂直空间。然而，你仍然需要自己管理body的高度，因为如果它超过了页眉和页脚之间的剩余空间，它就会溢出。