Funzionalità di stampa dell'intestazione/piè di pagina HTML

Question

Sto provando a fornire funzionalità di stampa di intestazione/piè di pagina HTML complete al nostro progetto Mediboard.

A lungo termine, so che il modulo CSS3 Page Media soddisferà i miei bisogni, ma sono almeno due o tre anni.

Così ho provato a farlo funzionare con le funzionalità CSS2, e funziona quasi come si può vedere su questo printable document. Tuttavia, ho ancora un limite sul footer in cui il contenuto viene stampato sotto il piè di pagina (vedere le pagine 3-4 con Anteprima di stampa).

Anche se sono abbastanza sicuro che il padding-bottom del div.body utilizzato per farlo funzionare in Firefox 2.

In ogni caso, fa qualcuno ha un indizio difficile da help me su questo problema?

EDIT: per ottenere maggiori dettagli, al momento non abbiamo intestazioni e piè utilizzando elementi posizionati con position: fixed, con top:0 o bottom:0 a seconda se si tratta di un'intestazione o un piè. Funziona bene e, durante la stampa, questi elementi vengono ripetuti su ogni pagina nella posizione corretta (vedere l'esempio "documento stampabile"). L'unico problema è quando si verifica un'interruzione di pagina, il testo viene disegnato dietro a questi elementi (vedi pagina 3/4)

EDIT2: Aggiornato l'URL del documento

Answer 1

Si vuole implementare tipi di supporti più probabile. Si prega di consultare http://www.w3.org/TR/CSS2/media.html per ulteriori informazioni. È possibile avere un foglio CSS che non ha un piè di pagina flottante per la stampa e l'altro per lo schermo.

<LINK REL="stylesheet" TYPE="text/css" MEDIA="print, handheld" HREF="foo.css">

Questo è un esempio.

Si può anche considerare di rendere invisibile il piè di pagina sulla pagina stampata se non è necessario.

Answer 2

Dalla mia esperienza, l'interruzione di pagina non funziona all'interno di un elemento. Se un elemento come [p] [/ p] si estende su due pagine stampate, il codice HTML non è a conoscenza di dove avviene l'interruzione tra le pagine. Questo perché l'utente può impostare i propri margini di stampa di 1 o 1,75 pollici o qualche altro valore. I margini effettivi della stampante non possono essere impostati tramite CSS. I CSS possono solo impostare i margini e il padding sulla pagina HTML - sui margini definiti dalla "stampante". Nessuna informazione sulle impostazioni della stampante, come i margini, viene inviata al browser. Questo spiega perché il contenuto viene sottoscritto sotto l'intestazione poiché il browser non ha idea di quando il feed della pagina è avvenuto. La soluzione più semplice è solo avere le informazioni di intestazione sulla prima pagina, ma non è quello che vuoi. L'approccio della forza bruta consiste nell'inserire le interruzioni di pagina [br style = "page-break-before: always;" /] all'interno del paragrafo nel posto appropriato, ma ciò non è pratico per un numero elevato di documenti. Inoltre, le sottili differenze tra le stampanti, incluse quelle dello stesso produttore, differiscono leggermente - per esempio, una stampa può stampare il contenuto giusto su una pagina, la stampante successiva potrebbe avere l'ultima riga nella pagina successiva anche se entrambe le stampanti hanno lo stesso margine impostazioni. Tuttavia, per informazioni tabulari ([table] [/ table]) l'assegnazione di tali CSS diventa facile da mantenere le tabelle insieme. Sto ipotizzando che uno possa contare i caratteri su una pagina e inserire dinamicamente le interruzioni di pagina tramite javascript (facile, se hai usato JQuery) per approssimare l'approccio della forza bruta.

Answer 3

C'è una bella risposta here che coinvolge le tabelle. Fa esattamente quello che vuoi e presumibilmente funziona anche in IE6.

Answer 4

Sembra CSS2 ha una regola @page in cui è possibile definire le dimensioni della pagina e un margine:

@page { size:8.5in 11in; margin: 6em 1em 2em } 

oppure

@page { size:auto; margin: 6em 1em 2em } 

Purtroppo non ho il tempo di testarlo, ma mi piacerebbe sapere se funziona. Potrei usarlo.

Mi piace quello che stai pianificando con l'intestazione/piè di pagina. Buon lavoro :)