页脚不在内容的底部在打印预览中 [英] Footer Not Aligning At Bottom Of Content In Print Preview

问题描述

为了做一个简短的故事，我负责修复所有这些CSS问题的Microsoft SP。一个是内容无法在FireFox（一个众所周知的错误，Mozilla似乎不会解决）打印。所以我必须专门为FireFox创建一个样式表，以便内容可以打印。

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.

我已经解决了问题，它打印得很好。我现在的问题是，页脚不会停留在内容的底部，因为内容的位置：绝对（FF打印错误的修复之一）。

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).

以下是（大致）HTML代码：

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>

我的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.

我一直在努力与这几天，所以任何想法将非常感谢。我真的很好的CSS，但是当涉及到微软做的事情的愚蠢的问题，这真的很令人沮丧。

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.

感谢任何建议!!!

推荐答案

Wohoo！我想出来了！

Wohoo! I figured it out!

感谢您的帮助。这是我的CSS来修复它：

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;
}

所以我基本上必须封装 #ncs （像Lucius说的）然后从那里玩它。我可能会发布在我的语法笔记网站，以防万一如果这个线程被删除...希望它会帮助别人挣扎与FF打印错误。

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...

这篇关于页脚不在内容的底部在打印预览中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！