Interruzione di pagina su elementi fissi

Question

Con la regola CSS page-break in @media print è facile interrompere il contenuto quando si stampa dal browser. Funziona bene per me tranne una cosa: non funziona quando l'elemento è fisso. L'utilizzo di page-break-after: always o page-break-before: always su elementi fissi non ha aiutato, il risultato è sempre lo stesso - il contenuto si sovrappone semplicemente a div. C'è qualche soluzione per questo?

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

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

Il contenuto è visualizzato in content div ed è dinamico. CSS per piè di pagina:

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

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

Usando questo piè di pagina CSS appare su ogni pagina, ma l'uso di page-break in .footer classe non rompe la pagina?

Answer 1

unica soluzione che ho pensato è quello di dare un contenuto padding-bottom superiore all'altezza del piè di pagina. In tal caso, il piè di pagina e il contenuto non si sovrappongono.

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

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

Answer 2

break-after è una versione più generica di page-break-after.

Provalo come break-after:always e facci sapere se funziona.

Source