页脚未在打印预览中的内容底部对齐
[英]Footer Not Aligning At Bottom Of Content In Print Preview
问题描述
长话短说，我负责解决 Microsoft SP 的所有这些 CSS 问题。 一个是无法在 FireFox 中打印内容（Mozilla 似乎无法解决这个众所周知的错误）。 所以我必须专门为 FireFox 创建一个样式表，以便可以打印内容。
我已经解决了这个问题，它打印得很好。 我现在遇到的问题是页脚不会停留在内容的底部，因为内容具有 position: absolute （FF 打印错误的修复之一）。
这是（大致）HTML代码：
<div id="ncs">
<div class="ncs_content">
<div class="ncs_stage">
<div class="ncs_stage_top">
<div class="ncs_stage_content">content...</div>
</div>
</div>
</div>
<div class="ncs_footer">turned off content</div>
<div class="ncs_footer_printed_date">print date that needs to be displayed</div>
</div>
我的CSS：
#ncs { border: none; width: 100%; height: 100%; float: none; background: none; }
.ncs_content { background: none; border: none; float: none; }
/* this fixes the FF bug */
.ncs_stage_content {
float: none;
overflow: visible !important;
position: absolute;
height: auto;
width: 90%;
font-size: 14px;
padding: 20px 0px;
margin: 10px 0px;
font-size: 120%;
clear: both;
display: block;
}
.ncs_footer { clear: both; height: 100%; position: relative; }
.ncs_footer_printed_date {
float: left;
display: block;
width: 950px;
position: relative;
bottom: 0;
left: 0;
clear: both;
height: 120%;
vertical-align: bottom;
}
我让它在每一页上打印页脚，但这还不够好。 他们希望它打印在内容的底部。
我已经为此苦苦挣扎了几天，所以任何想法都将不胜感激。 我真的很擅长 CSS，但是当涉及到微软制造的东西的愚蠢问题时，它真的很令人沮丧。
感谢您的任何建议！！！
4 个解决方案
解决方案1
0 2010-10-15 17:05:45
如果我误解了，请原谅我，但是对页脚使用绝对定位怎么样？
解决方案2
0 2010-10-15 17:56:48
如果移动内容DIV中的页脚？ 它应该位于页面底部..（我知道这会破坏文档的逻辑结构，但如果它为您节省了很多痛苦，总而言之..嘿，谁在乎？;-)） .
绝对定位页脚不会解决问题，“因为两个块”的位置仍然是独立的
解决方案3
0 已采纳 2010-10-19 14:11:50
哇！ 我想通了！
感谢您的帮助。 这是我的 CSS 来修复它：
#ncs {
float: none;
overflow: visible !important;
position: absolute;
height: auto;
width: 99%;
font-size: 12px;
padding: 20px 0px;
margin: 10px 0px;
clear: both;
}
.ncs_content { background: none; border: none; float: none; }
.ncs_stage_content, .ncs_stage { margin: 0; padding: 0; float: none; clear: both; font-size: 12px; }
.ncs_footer { display: none; }
.ncs_footer_printed_date {
margin: 0px;
padding: 0px;
width: 750px;
font-size: 12px;
display: block;
}
所以我基本上必须将所有内容封装在#ncs （就像 Lucius 所说的那样），然后从那里开始使用它。 我可能也会将其发布在我的语法注释站点上，以防万一该线程被删除...希望它会帮助其他人在 FF 打印错误中苦苦挣扎。
感谢大家！ 万岁！ 现在我要告诉我的老板……他不在乎花了多长时间，或者我的头撞在桌子上杀死了多少脑细胞……
解决方案4
0 2021-04-29 13:29:31
问题：带有位置的页脚：绝对底部：0px； 都到首页页脚。
要绕过 firefox 错误，请将.page div 的 margin-top 设置为 0px 以外的值
.page是每个真正的 a4 页面都对应于这个类。 为打印预览中的每个单独页面指定。
@media print {
.page {
margin-top: 1px;
top: -1px;
/* nudge back up to compensate for margin */
}
}
完整代码（示例）：
<html><head>
<style>
@page {
size: A4 portrait;
margin: 0;
}
body {
margin: 0;
padding: 0;
font-family: "Verdana", sans-serif;
}
.page {
position: relative;
width: 209mm;
height: 295mm; /* slightly smaller than A4 as there's a bug in Chrome whereby it overflows
the physical page otherwise */
overflow: hidden;
}
.pagea { background-color: tomato; }
.pageb { background-color: green; }
.content {
position: absolute;
top: 100px;
left: 100px;
font-size: 36pt;
color: black;
}
@media print {
.page {
/* uncomment these lines and it works...
margin-top: 1px;
top: -1px;
*/
/* nudge back up to compensate for margin */
}
/* code below included in his example, but in my case, it creates EXTRA blank pages due to page overflow 1cm . so i disabled this code. */
/*
.page { page-break-before: always; }
.page:first-child { page-break-before: avoid; }
*/
}
</style>
</head>
<body>
<div class="page pagea">
<div class="content">Page 1</div>
</div>
<div class="page pageb">
<div class="content">Page 2</div>
</div>
</body></html>
我在这里使用了“david Earl”展示的解决方法
示例： https : //bug267029.bmoattachments.org/attachment.cgi?id=8724763
错误帖子： https : //bugzilla.mozilla.org/show_bug.cgi?id=267029#c18
页脚未与页面底部对齐
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.