Нижний колонтитул не выравнивается по нижней части содержимого в предварительном просмотре

Question

Короче говоря, я отвечаю за исправление всех этих проблем с CSS в Microsoft SP.Одним из них является невозможность печати содержимого в FireFox (общеизвестная ошибка, которую Mozilla, похоже, не исправит).Поэтому мне нужно создать таблицу стилей специально для FireFox, чтобы содержимое могло печататься.

Я уже исправил проблему, и она печатается нормально.Проблема, с которой я столкнулся сейчас, заключается в том, что нижний колонтитул не останется в нижней части содержимого, поскольку содержимое имеет позицию: 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, но когда дело доходит до глупых проблем с вещами, которые делает Microsoft, это действительно расстраивает.

Спасибо за любой совет !!!

Answer 1

Что если вы переместили нижний колонтитул внутрь содержимого div? Он должен располагаться внизу страницы ... (Я знаю, что это нарушит логическую структуру документа, но если это избавит вас от большой боли, в общем ... эй, кого это волнует? .

Абсолютное позиционирование нижнего колонтитула не решит проблему, потому что позиции двух блоков все равно будут независимыми

Answer 2

Wohoo!Я понял это!

Спасибо за вашу помощь.Вот мой 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 (как сказал Люциус), а затем поиграть с этим оттуда.Вероятно, я также опубликую это на своем сайте с примечаниями по синтаксису, на случай, если этот поток будет удален ... надеюсь, это поможет кому-то еще бороться с ошибкой печати FF.

Спасибо всем!УРА!Теперь я скажу своему боссу ... не то, чтобы ему было все равно, сколько времени понадобилось или сколько клеток мозга я убил, ударив головой о стол ...

Answer 3

Простите, если я неправильно понял, но как насчет использования абсолютного позиционирования для нижнего колонтитула?