0

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

4 回答 4

0

我不认为你正在寻找的东西只能用 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 项目，它可以伸展以占据页眉和页脚之间的整个垂直空间。但是，您仍然需要自己管理正文的高度，因为如果它超过页眉和页脚之间的剩余空间，它将溢出。

于 2013-03-22T03:49:32.253 回答
0

研究CSS 粘性页脚技术。

原理是这样的：

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

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

于 2013-03-21T20:48:15.223 回答
0

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

于 2013-03-21T21:10:52.227 回答
0

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

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">
于 2013-03-21T21:00:08.727 回答