页脚未在打印预览中的内容底部对齐
[英]Footer Not Aligning At Bottom Of Content In Print Preview
问题描述
To make a short story long, I'm in charge of fixing all these CSS issues of Microsoft SP.
长话短说，我负责解决 Microsoft SP 的所有这些 CSS 问题。 One is the inability for the content to print in FireFox (a well known bug that Mozilla seems it won't address).一个是无法在 FireFox 中打印内容（Mozilla 似乎无法解决这个众所周知的错误）。 So I have to create a stylesheet specifically for FireFox so the content can print.所以我必须专门为 FireFox 创建一个样式表，以便可以打印内容。
I already fixed the issue and it prints fine.我已经解决了这个问题，它打印得很好。 The problem I'm having now is that the footer won't stay at the bottom of the content since the content has position: absolute (one of the fixes for the FF print bug).我现在遇到的问题是页脚不会停留在内容的底部，因为内容具有 position: absolute （FF 打印错误的修复之一）。
Here's (roughly) the HTML code:这是（大致）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>
My CSS:我的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;
}
I got it to print the footer on every page, but that's not good enough.我让它在每一页上打印页脚，但这还不够好。 They want it to print at the bottom of the content.他们希望它打印在内容的底部。
I've been struggling with this for a few days now so any ideas would be greatly appreciated.我已经为此苦苦挣扎了几天，所以任何想法都将不胜感激。 I am really good at CSS but when it comes to stupid issues with things that Microsoft makes, it's really frustrating.我真的很擅长 CSS，但是当涉及到微软制造的东西的愚蠢问题时，它真的很令人沮丧。
Thanks for any advice!!!感谢您的任何建议！！！
4 个解决方案
解决方案1
0 2010-10-15 17:05:45
如果我误解了，请原谅我，但是对页脚使用绝对定位怎么样？
解决方案2
0 2010-10-15 17:56:48
What if you moved the footer inside the content div?如果移动内容DIV中的页脚？ It should position itself at the bottom of the page.. (I know that this would break the logical structure of the document, but if it saves you of lot of pain, all in all.. hey, who cares? ;-) ).它应该位于页面底部..（我知道这会破坏文档的逻辑结构，但如果它为您节省了很多痛苦，总而言之..嘿，谁在乎？;-)） .
Absolute positioning the footer won't solve the problem, 'cause the two blocks' positions would still be independent绝对定位页脚不会解决问题，“因为两个块”的位置仍然是独立的
解决方案3
0 已采纳 2010-10-19 14:11:50
Wohoo!哇！ I figured it out!我想通了！
Thanks for all your help.感谢您的帮助。 Here's my CSS to fix it:这是我的 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;
}
So I basically had to encapsulate everything in #ncs (like what Lucius said) then play with it from there.所以我基本上必须将所有内容封装在#ncs （就像 Lucius 所说的那样），然后从那里开始使用它。 I'll probably post this on my syntax notes site as well just in case if this thread gets removed... hopefully it'll help someone else struggling with the FF print bug.我可能也会将其发布在我的语法注释站点上，以防万一该线程被删除...希望它会帮助其他人在 FF 打印错误中苦苦挣扎。
Thanks to all!感谢大家！ HURRAY!万岁！ Now I will tell my boss... not that he cares how long it took or how many brain cells I killed by hitting my head against my desk...现在我要告诉我的老板……他不在乎花了多长时间，或者我的头撞在桌子上杀死了多少脑细胞……
解决方案4
0 2021-04-29 13:29:31
problem: footer with position:absolute bottom:0px;问题：带有位置的页脚：绝对底部：0px； all goes up to first pages footer.都到首页页脚。
to bypass firefox bug , set margin-top other than 0px of the .page div要绕过 firefox 错误，请将.page div 的 margin-top 设置为 0px 以外的值
.page is every real a4 page corresponds to this class. .page是每个真正的 a4 页面都对应于这个类。 inteded for every seperate page in the print Preview .为打印预览中的每个单独页面指定。
@media print {
.page {
margin-top: 1px;
top: -1px;
/* nudge back up to compensate for margin */
}
}
full code (example):完整代码（示例）：
<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>
i used workaround here showed by "david earl"我在这里使用了“david Earl”展示的解决方法
example: https://bug267029.bmoattachments.org/attachment.cgi?id=8724763示例： https : //bug267029.bmoattachments.org/attachment.cgi?id=8724763
bug-post : https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c18错误帖子： https : //bugzilla.mozilla.org/show_bug.cgi?id=267029#c18
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.