Нижний колонтитул HTML на последней напечатанной странице

Я хочу распечатать свою html-страницу. У меня более 1 страницы, и я хочу напечатать нижний колонтитул только внизу последней страницы. Мой CSS

@page {
        size: 8.5in 11.0in;
        margin-left: 0.7cm;
        margin-top: 0.7cm;
        margin-top: 0.7cm;
        margin-bottom: 2.6cm;
        margin-right: 0.5cm
    }

#footer {
        clear: both;
        position: running(footer);
        z-index: 10;
        margin-top: -1em;
        vertical-align: bottom;
        height: 5%;
    }

 @page {
        @bottom-center {
            content: element(footer);
        }
    }

HTML:

<body><div id="content"></div>
       <div id="footer"></div>
<body>

Это работает, но когда у меня есть очень большая таблица в конце моего контента, например, таблица из 6 страниц, мой нижний колонтитул заполняется для всех страниц с таблицей.


html css pdf-generation
person Andrey Braslavskiy    schedule 12.12.2014    source источник

Ответы (2)


arrow_upward
1
arrow_downward

РЕШЕНО: Ниже код CSS будет отображать нижний колонтитул или любой другой контент только на последней странице PDF.

<style type="text/css" media="print">    
    @page {    
        size: A4 portrait;    
        padding-left: 8px;    
        padding-right: 0px;
        margin-top: 50px;
        margin-bottom: 150px;
    
        @bottom-center {width: 100%; content: element(footer)}
    }  
    
    @media print {
        .footer {
            left: 0;
            width: 100%;
            position: running(footer);
            height: 200px;
        }  
    }
</style>



<div class="footer">
    Content Here
</div>
person Rohit Soni    schedule 30.07.2021

arrow_upward
-3
arrow_downward

Чтобы сделать его более простым, вы можете поместить нижний колонтитул в медиа-запрос для печати другим способом:

@media print { 
body {
  position: relative;
  }
#printfooter {
  position: absolute;
  bottom: 0;
  }
}

Как быстрое обходное предложение. Или вы используете css3 с расширением @page:

@page:last {
    @bottom-center {
        content: element(footer);
    }
}

Для получения дополнительной информации у w3 есть довольно хороший документальный фильм о CSS Paged Media Modules. 5.3, пример 7 — это полезная информация!

Надеюсь, что-то из этого поможет! Если, или если нет, пожалуйста, дайте мне знать.

С уважением, Мариан.

person Marian Rick    schedule 12.12.2014
comment
К сожалению, для правила @page нет псевдокласса :last. - person zutnop; 10.12.2017