Page-break на фиксированных элементах

Question

С правилом CSS page-break в @media print легко разбить контент при печати из браузера. Он работает хорошо для меня, кроме одного: он не работает, когда элемент исправлен. Использование page-break-after: always или page-break-before: always на фиксированном элементе не помогло, результат всегда один и тот же - содержимое просто перекрывает этот div. Есть ли решение для этого?

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

<div class="footer"></div> 

Содержимое размещается в содержании div и динамически. CSS для колонтитула:

@media screen{ 
    .footer{ 
    display:none; 
    } 
} 

.footer{ 
    display:block; 
    height:30px; 
    position:fixed; 
    bottom:0; 
} 

Используя этот CSS колонтитул на каждой странице появляется, но использование page-break в .footer классе не ломает страницу?

Answer 1

Только решение, которое я понял, чтобы дать содержание набивка дна больше, чем высота колонтитула. В этом случае нижний колонтитул и содержимое не будут перекрываться.

.footer{ 
    display:block; 
    height:30px; 
    position:fixed; 
    bottom:0; 
} 

#content { 
    ... 
    padding-bottom:50px; 
} 

Answer 2

break-after - более общая версия page-break-after.

Попробуйте break-after:always и сообщите нам, если это будет работать.

Source