Podział strony na stałe elementy

Question

Z regułą CSS page-break w @media print łatwo jest dzielić zawartość, gdy drukujemy z przeglądarki. Działa dobrze dla mnie z wyjątkiem jednej rzeczy: nie działa, gdy element jest naprawiony. Użycie page-break-after: always lub page-break-before: always na stałym elemencie nie pomogło, wynik jest zawsze taki sam - treść po prostu pokrywa się z div. Czy istnieje jakieś rozwiązanie?

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

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

Treść pojawia się w dziale treści i jest dynamiczna. CSS na stopce:

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

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

Stosując tę ​​CSS stopkę na każdej stronie pojawia, ale korzystanie z page-break w .footer klasie nie łamie stronę?

Answer 1

jedynym rozwiązaniem Pomyślałem jest dać zawartość padding-bottom większą niż wysokość stopki. W takim przypadku stopka i treść nie będą się pokrywać.

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

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

Answer 2

break-after to bardziej ogólna wersja page-break-after.

Wypróbuj jak break-after:always i daj nam znać, czy to działa.

Source