Footer überlappenden Inhalt in gedruckten Seite

Ich versuche, eine lange HTML-Seite zu schreiben, die, wenn gedruckt, enthält eine Fußzeile, die sagt "Nur für den amtlichen Gebrauch (FOUO)". Ich habe es absolut am unteren Rand der Seite positioniert, aber der Inhalt der Seite fällt auch so weit ab, oder die Fußzeile überlappt sich. Ich habe versucht, mein @ media print CSS so zu konfigurieren, dass der Hauptinhalt einer Seite um 50 Pixel kleiner ist als die gesamte Höhe der Seite, aber das tut nichts. Hier ist meine CSS ist:Footer überlappenden Inhalt in gedruckten Seite

@media print { 
#content { 
    max-height: calc(100% - 50px); 
} 
#printFooter { 
    position: fixed; 
    text-align: center; 
    bottom: 0; 
    margin: 0 auto 0 auto 
}

}

Dies geht mit einer HTML-Datei mit der folgenden Form:

<body> 
    <div id="content">Lots of text in this div to make it extend beyond first page</div> 
    <div id="printFooter">For Official Use Only (FOUO)</div> 
</body>

Kann jemand bitte helfen Sie mir herauszufinden, wie mein CSS einzurichten, so dass Der Inhalt wird am Ende der Seite nicht überlappt?

Chris

Quelle

2017-02-16 Chris

versuchen Sie die Fußzeile auf der Unterseite jeder gedruckten Seite oder nur 1 Fußzeile am unteren Ende zu bekommen der letzten Seite? – zgood

Bei mir funktioniert es perfekt https://plnkr.co/edit/wkINSBwXfCWGqi4uwTVd?p=preview –

Ich versuche, die Fußzeile auf der Unterseite jeder gedruckten Seite zu bekommen, aber es kann nicht funktionieren Wenn ich die Vorschau drucke, wird sie nicht auf allen Seiten angezeigt – Chris

Ich fand nur diese Lösung, aber wir verlieren einen Text (

<body> 
    <div id="content">Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first page<br /><br /><br /><br /><br /><br /><br /><br /><br />Lots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first pageLots of text in this div to make it extend beyond first page</div> 
    <div id="printFooter">For Official Use Only (FOUO)</div> 
</body> 

@media print { 
    #printFooter { 
    position: fixed; 
    text-align: center; 
    bottom: 0; 
    width: 100%; 
    background: #fff; 
    margin: 0 auto 0 auto 
}

Quelle

2017-02-16 20:07:41 grinmax

Sonst kann dies durch einige Divs gesteuert werden, die in der Druckversion angezeigt werden und zusätzliche Padding – grinmax

Ich habe gerade den Code oben mit einem Zusatz versucht.Ich habe eine Grenze und Polsterung auf den Inhalt Abschnitt innerhalb der Mediendruck: [code] @media print { \t \t \t \t #content { \t \t \t \t \t padding-bottom: 50px; \t \t \t \t \t Grenze-unten: 1px fest; \t \t \t \t} \t \t \t \t #printFooter { \t \t \t \t \t Position: fixed; \t \t \t \t \t Textausrichtung: Mitte; \t \t \t \t \t unten: 0; \t \t \t \t \t Breite: 100%; \t \t \t \t \t hintergrund: #fff; \t \t \t \t \t margin: 0 auto 0 auto \t \t \t \t} \t \t \t} [/ code] Ich erhalte die Fußzeile am unteren Rand jeder Seite, sondern auf der ersten Seite, es überlappt die Mitte der letzten Textzeile. Und der Rand erscheint nur auf der 2. Seite. – Chris

Footer überlappenden Inhalt in gedruckten Seite

Antwort

Verwandte Themen