Nota per i naviganti:
se sei arrivato fin qui tramite Google, cercando come sia possibile creare con un CSS ad hoc un header o un footer fisso (fixed) cross-browser (possibilmente), forse troverai molto utile questi link (presi da qui)
Se invece ti serve un header/footer fisso per il layout di stampa, continua la lettura qui sotto ↓
Partiamo da un presupposto: se stai cercando di preparare il layout di un sito con un foglio di stile CSS apposito per la stampa e vuoi che su ogni pagina
stampata ci siano un'intestazione e un pie' pagina fisso indipendentemente dalla lunghezza del contenuto/numero di pagine, o hai una necessità impellente, o sei fuori strada :D
se puoi evitarlo, imho, è meglio evitare
se proprio, come me, devi farlo allora forse hai trovato la soluzione che fa per te
premessa: in attesa di avere un buon supporto CSS3 sui più comuni browser, questa soluzione non è perfetta, ha qualche sbavatura, ma in compenso è "quasi"
cross-browser, o almeno con IE6 e FF da risultati apprezzabili, pur rimanendo un workaround
Cronistoria: dopo aver passato un paio d'ore a cercare una soluzione, mi imbatto in una cosa che non è pensata per quello che devo fare io... ma con un po' di colla e delle forbici dalla punta arrotondata si può adattare alle mie esigenze (:P)
Il punto di partenza è questo link:
http://web.tampabay.rr.com/bmerkey/examples/nonscroll-table-header.htmluna tabella con header e footer "fisso", ma con contenuto scrollabile;
la particolarità che a noi interessa è che stampando la tabella, l'header e il footer vengono riportati su ogni pagina che la print preview ci propone
questo grazie al particolare CSS ad hoc (style type="text/css" media="print") che mantiene fissi Header e Footer
non entro nel merito dell'analisi di tutto il codice, perché non sono un esperto e non riuscirei a spiegare tutto :)
in breve: sostituiamo la tabella del link con una tabella a singola cella, nella quale inseriamo il contenuto (anche dinamico) della nostra pagina
fatto ;) - enjoy
note:su IE, prima della stampa, non bisogna scrollare o l'header si posiziona in mezzo alla pagina
su FF il footer non viene sempre visualizzato correttamente... magari giochicchiando con un po' padding e margin si aggiusta ;)
una
pagina d'esempio la trovate su adlabor.it
un po' di maccheronico inglese gli sventurati forastieri di questo lido
In English
How to make a fixed Header/Footer Layout for printing?
You've only to get this example code
Visualizza il codice dell'esempio - View Example Code<!-- This page created by bmerkey@tampabay.rr.com -->
<!-- Print Fixed Header and Footer - by zerokilled [4T] gmail.com -->
<html>
<head>
<title>Scrollable Table with Fixed Header, repeat print header and footer</title>
<meta name="keywords" content="fixed table header; non-scroll header; fixed
footer; freeze header; CSS tips; print repeating headers; print repeating
footers">
<link rel="stylesheet" href="basic.css" type="text/css">
<style type="text/css">
div.tableContainer {
width: auto; /* table width will be 99% of this*/
/*height: 295px; /* must be greater than tbody*/
overflow: auto;
margin: 0px;
}
table {
width: 99%; /*100% of container produces horiz. scroll in Mozilla*/
border: none;
background-color: #FFFFFF;
}
table>tbody { /* child selector syntax which IE6 and older do not support*/
overflow: auto;
/*height: 250px;*/
overflow-x: hidden;
background-color: #FFFFFF;
}
thead tr {
position:relative;
top: expression(offsetParent.scrollTop); /*IE5+ only*/
background-color: #FFFFFF;
}
thead td, thead th {
text-align: center;
border-bottom: 1px solid #999999;
background-color: #FFFFFF;
}
td {
text-align: justify;
background-color: #FFFFFF;
}
tfoot td {
text-align: center;
border-top: 1px solid #999999;
background-color: #FFFFFF;
}
td:last-child {padding-right: 20px;} /*prevent Mozilla scrollbar from hiding cell content*/
</style>
<!-- print style sheet -->
<style type="text/css" media="print">
div.tableContainer {overflow: visible; }
table>tbody {overflow: visible; }
td { } /*adds control for test purposes*/
thead td { }
tfoot td {
text-align: center;
border-top: 1px solid #999999;
}
thead {display: table-header-group; }
tfoot {display: table-footer-group; }
thead th, thead td {position: static; }
</style>
</head>
<body>
<div id="container">
<div class="tableContainer">
<table cellspacing="0">
<thead>
<tr>
<td><!-- # qui ci mettiamo l'header - here the page header #--></td>
</tr>
</thead>
<tfoot>
<tr>
<td><!-- # qui ci mettiamo il footer- here the page footer #--></td>
</tr>
</tfoot>
<tbody>
<tr>
<td><!-- # qui ci mettiamo il contenuto della pagina - here the page content
#--></td>
</tr>
</tbody>
</table>
</div>
</div>
</body>
</html>
È sicuramente uno dei programmi più intelligenti degli ultimi anni: Hamachi
