HTML нижний колонтитул внизу всех страниц HTML распечатывается в IE

Мне предлагается получить нижний колонтитул внизу каждой страницы распечатки веб-страницы html (а не фактическая страница в браузере). Вы, ребята, знаете какой-нибудь способ сделать это? (Он должен работать на IE, и просто IE в порядке)

Я попытался использовать фиксированное дно, но содержимое перекрывается с нижним колонтитулом.

Я попытался использовать javascript для вычисления пространства и дать пустой div height: использовал, если нижний нижний колонтитул% высоты страницы!= 0, добавьте требуемый пробел. Но значение нижней части нижнего колонтитула и требуемого пробела, похоже, изменяется с изменением типа элементов.

var printPageHeight = 1900; 
var mFooter = $("#footer-nt");
var bottomPos = mFooter.position().top + mFooter.height();


var remainingGap = (bottomPos <printPageHeight ) ? (printPageHeight -bottomPos) :       printPageHeight - (bottomPos % printPageHeight );


$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");

Я попытался использовать таблицу, хорошо работает для всех страниц, кроме последней.

Я попробовал несколько других полей и таких настроек, но они тоже не работали.

Я действительно хочу, чтобы нижний колонтитул отображался только в нижней части последней страницы распечатки, если это возможно.

Ответы

Ответ 1

Я отвечаю на свой вопрос, если кто-то еще нуждается в решении.

После длительных исследований и интенсивных попыток (в основном, проб и ошибок) я использовал следующую логику, чтобы установить нижний колонтитул только в нижней части последней страницы: -

  • В css: @media print {position: fixed; top: 0; left: 0; z-index -1; } Ad IE отображал его внизу каждой страницы и был отправлен на фон с помощью z-index.

  • Тем не менее, фон текста в IE был прозрачным в распечатке, поэтому текст был поверх верхнего колонтитула. Таким образом, используется белое изображение 1px на 1px в абсолютном верхнем левом положении, чтобы действовать как фон изображения.

  • Используется javaScript для установки высоты и ширины изображения так же, как высота div, содержащего контент.

HTML:

<body>
    <div id="wrapper"> <!-- not necessary -->
        <img scr="./img/white.png" id="whiteBg" />
        <div id="content">
            <!-- content here -->
        </div>
    </div>
    <div id="footer">
    </div>
</body>

CSS

@media screen {
    #whiteBg {
        display: none;
    }
}

@media print {
   #whiteBg {
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      z-index: -1; //to send it to the background
   } 
   #wrapper {
      padding-bottom: (the size of the footer, to make footer visible on last page).
   }
   #footer {
     position: fixed;
     bottom: 0;
   }
}

JQuery

 @('#whiteBg').height(  $('#content')).height()  );

ПОЛУЧИТЬ ПЛОТЕР НА НИЖНЕЙ СТРАНИЦЕ, Я ИСПОЛЬЗУЛ: (2-й сценарий)

CSS

@media print {
   #footer {
     position: fixed;
     bottom: 0;
   }
   body {
     margin: x x y x; (y should reflect the height of the footer);
}

Ответ 2

Может быть, что-то вроде этого?

<link rel="stylesheet" href="print.css" type="text/css" media="print" /> /* this css file is only for printing purposes*/

body:after {
   content: "I am the footer";
}

Используйте последний элемент, который у вас есть в конце документа, а не тело...