HTML-Fußzeile am Ende aller Seiten von HTML-Druck in IE

Ich werde gebeten, eine Fußzeile am Ende jeder Seite der HTML-Webseite drucken (nicht die eigentliche Seite im Browser). Weißt du irgendeinen Weg es zu tun? (Es sollte auf IE arbeiten, und nur IE ist in Ordnung)HTML-Fußzeile am Ende aller Seiten von HTML-Druck in IE

Ich versuchte mit festen Boden, aber Inhalte überschneidet sich mit der Fußzeile.

Ich habe versucht, Javascript zu verwenden, um Speicherplatz zu berechnen und geben Sie ein leeres div die Höhe: wurde verwendet, wenn unten in der Fußzeile% Seitenhöhe! = 0, erforderliche Lücke hinzufügen. Der Wert der Fußzeile und der erforderliche Leerraum scheinen sich jedoch mit der Änderung des Elementtyps zu ändern.

Ich versuchte mit Tabelle, funktioniert gut für alle Seiten, mit Ausnahme der letzten.

Ich habe ein paar andere Marge und solche Verbesserungen versucht, aber sie haben auch nicht funktioniert.

Ich möchte eigentlich die Fußzeile nur auf der Unterseite der letzten Seite des Ausdrucks angezeigt werden, wenn das möglich ist.

Quelle

2013-07-05 Anup Kattel

ich meine eigene Frage nur für den Fall zu beantworten, ob jemand eine Lösung braucht.

Nach einer lange Forschung und intensive Versuche (vor allem Versuch und Irrtum), I folgende Logik verwendet, um die Fußzeile zu setzen nur auf dem Boden der letzten Seite: -

in CSS: @ media print { Position: fixiert; oben: 0; links: 0; Z-Index -1; } Der Anzeigen-IE hat ihn unten auf jeder Seite angezeigt und wurde vom Z-Index an den Hintergrund gesendet.
Immer noch war der Hintergrund des Textes in IE im Ausdruck transparent, so dass der Text oben auf der Fußzeile war. Also, verwendet weißes Bild von 1px bis 1px in der absoluten oberen linken Position, um als Hintergrund des Bildes zu dienen.
Verwendet javaScript, um die Höhe und Breite des Bildes identisch mit der Höhe des Div, das Inhalt hatte.

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() );

zum Footer auf der Unterseite des EVE GET RY PAGE, habe ich: (2. Szenario)

css:

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

Quelle

2013-07-08 04:20:46

Zum Zeitpunkt der Erstellung dieses Artikels funktioniert diese Lösung in Chrome nicht. – Rap

Das ist richtig. Die Frage wurde speziell nur für IE und IE gestellt. –

Ich habe den Titel und die Tags entsprechend aktualisiert, OP könnte das nächste Mal in Erwägung ziehen. Mod kann diese nicht hilfreichen Kommentare ebenfalls markieren und entfernen. –

Vielleicht so etwas?

<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"; 
}

Verwenden Sie das letzte Element, das Sie am Ende des Dokuments anstelle von Körper ...

Quelle

2013-07-05 07:31:48

sehr interessant. Danke –

Interessanter Ansatz, funktioniert aber leider nicht, wenn Sie mehrere Seiten haben. – tftd

HTML-Fußzeile am Ende aller Seiten von HTML-Druck in IE

Antwort

Verwandte Themen