Piè di pagina HTML nella parte inferiore di tutte le pagine di stampa HTML in IE

Mi viene chiesto di ottenere un piè di pagina nella parte inferiore di ogni pagina della pagina Web HTML stampata (non la pagina effettiva sul browser). Ragazzi, avete modo di farlo? (Dovrebbe funzionare su IE e solo IE va bene)Piè di pagina HTML nella parte inferiore di tutte le pagine di stampa HTML in IE

Ho provato a utilizzare il fondo fisso, ma il contenuto si sovrappone al piè di pagina.

Ho provato a utilizzare javascript per calcolare lo spazio e fornire a un div vuoto l'altezza: era in uso se in fondo all'altezza del piè di pagina%! = 0, aggiungi Spazio richiesto. Ma il valore del fondo del piè di pagina e lo spazio bianco richiesto sembra cambiare con il cambiamento nel tipo di elementi.

var printPageHeight = 1900; 
var mFooter = $("#footer-nt"); 
var bottomPos = mFooter.position().top + mFooter.height(); 


var remainingGap = (bottomPos <printPageHeight) ? (printPageHeight -bottomPos) :  printPageHeight - (bottomPos % printPageHeight); 


$("#whiteSpaceToPositionFooter").css("height", remainingGap+"px");

Ho provato a utilizzare la tabella, funziona bene per tutte le pagine, tranne l'ultima.

Ho provato qualche altro margine e tali modifiche, ma non hanno funzionato neanche.

In realtà desidero che il piè di pagina venga visualizzato solo nella parte inferiore dell'ultima pagina di stampa, se possibile.

fonte

2013-07-05 Anup Kattel

sto rispondendo alla mia domanda nel caso in cui se qualcuno ha bisogno di una soluzione.

Dopo un lungo lavoro di ricerca e cerca intensiva (principalmente tentativi ed errori), ho usato seguendo la logica per impostare il piè di pagina solo sul fondo dell'ultima pagina: -

In css: @media print { posizione: fissa; inizio: 0; a sinistra: 0; z-index -1; } Ad IE lo ha visualizzato nella parte inferiore di ogni pagina ed è stato inviato allo sfondo da z-index.
Tuttavia, lo sfondo del testo in IE era trasparente nella stampa, quindi il testo era in cima al piè di pagina. Quindi, usa l'immagine bianca di 1px per 1px in assoluto in alto a sinistra per agire come sfondo dell'immagine.
Utilizzato javaScript per impostare l'altezza e la larghezza dell'immagine come l'altezza del div che aveva contenuto.

html:

<body> 
    <div id="wrapper"> <!-- not necessary --> 
     <img scr="./img/white.png" id="whiteBg" /> 
     <div id="content"> 
      <!-- content here --> 
     </div> 
    </div> 
    <div id="footer"> 
    </div> 
</body>

css:

@media screen { 
    #whiteBg { 
     display: none; 
    } 
} 

@media print { 
    #whiteBg { 
     display: block; 
     position: absolute; 
     top: 0; 
     left: 0; 
     z-index: -1; //to send it to the background 
    } 
    #wrapper { 
     padding-bottom: (the size of the footer, to make footer visible on last page). 
    } 
    #footer { 
    position: fixed; 
    bottom: 0; 
    } 
}

jquery:

@('#whiteBg').height( $('#content')).height() );

PER OTTENERE piè di pagina dal FONDO DI EVA RY PAGINA, ho usato: (2 ° scenario)

css:

@media print { 
    #footer { 
    position: fixed; 
    bottom: 0; 
    } 
    body { 
    margin: x x y x; (y should reflect the height of the footer); 
}

fonte

2013-07-08 04:20:46

Al momento della stesura di questo documento, questa soluzione non funziona in Chrome. – Rap

Esatto. La domanda è stata espressamente richiesta solo per IE e IE. –

ho aggiornato il titolo e i tag di conseguenza, OP potrebbe prendere in considerazione di farlo la prossima volta. mod potrebbe segnalare e rimuovere anche questi commenti inutili. –

Forse qualcosa del genere?

<link rel="stylesheet" href="print.css" type="text/css" media="print" /> /* this css file is only for printing purposes*/ 

body:after { 
    content: "I am the footer"; 
}

Utilizzare l'ultimo elemento si ha alla fine del documento, invece di corpo ...

fonte

2013-07-05 07:31:48

molto interessante. grazie –

Un approccio interessante, ma sfortunatamente non funziona se hai più pagine. – tftd

Piè di pagina HTML nella parte inferiore di tutte le pagine di stampa HTML in IE

risposta

Problemi correlati