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. One is the inability for the content to print in FireFox (a well known bug that Mozilla seems it won't address). So I have to create a stylesheet specifically for FireFox so the content can print.
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).
Here's (roughly) the HTML code:
<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:
#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.
Thanks for any advice!!!
Pardon me if I misunderstood, but what about using absolute positioning for the footer?
What if you moved the footer inside the content 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
Wohoo! I figured it out!
Thanks for all your help. Here's my CSS to fix it:
#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. 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.
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...
problem: footer with position:absolute bottom:0px; all goes up to first pages footer.
to bypass firefox bug , set margin-top other than 0px of the .page div
.page is every real a4 page corresponds to this class. 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"
example: https://bug267029.bmoattachments.org/attachment.cgi?id=8724763
bug-post : https://bugzilla.mozilla.org/show_bug.cgi?id=267029#c18
加载中,请稍侯......
精彩评论