Как распечатать номер страницы при печати html в новом Chrome?

Мне нужно напечатать номер страницы при печати html в Chrome версии 52.0.2743.116 м (64-разрядная версия). Однако я еще не нашел ответа.

Я уже пробовал это:

@page {
    @bottom-right {
        content: counter(page) " of " counter(pages);
    }
}

Это не сработало.

Затем я нашел это Q & A:

Для этого ответа мы не используем @page, который является чистым ответом CSS, но работает в версиях FireFox 20+. Вот ссылка примера. CSS:

#content {
    display: table;
 }
#pageFooter {
    display: table-footer-group;
 }

#pageFooter:after {
    counter-increment: page;
    content: counter(page);
 }

И код HTML:

 <div id="content">
     <div id="pageFooter">Page </div>
     multi-page content here...
 </div>

К сожалению, это работает только в версиях FireFox 20+ и в версии Chrome 35.0.1916.153

Переход не является ответом. Можете ли вы мне помочь, пожалуйста?

body { counter-reset: section; } @media print { .page { page-break-after: always; } .page .pageEnd::after { counter-increment: section; /* Increment the section counter*/ content: "Page " counter(section) " "; /* Display the counter */ } }

<div class="page"> <h2>Here is page 1</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 2</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 3</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 4</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 5</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 6</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div> <div class="page"> <h2>Here is page 7</h2> <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quas nulla accusantium, veritatis quidem voluptas ex, atque suscipit incidunt, dolore sunt reiciendis cum obcaecati, iste necessitatibus doloribus cumque facere beatae. Ratione?</p> <div class="pageEnd"></div> </div>

Ответ 1