Drucken Tabelle Fußzeile ganz unten auf der letzten Seite

Question

Ich verwende eine Tabelle, um eine Fußzeile auf jeder Seite (funktioniert in Firefox, das ist genug) zu erstellen.

A JS Fiddle: https://jsfiddle.net/j9k2xzze/

(Rechtsklick auf den Ausgabebereich -> Diese Frame -> Open Frame in neuem Tab Dann Vorschau Drucken normal funktionieren.)

<table id="wrapper"> 
    <thead> 
    <tr> 
     <td id="header"></td> 
    </tr> 
    </thead> 

    <tfoot> 
    <tr> 
     <td colspan="0" id="footer"> 
      <img src="footer.jpg"/> 
     </td> 
    </tr> 
    </tfoot> 

    <tbody> 
    <tr> 
     <td id="content"> 
      <?php echo $html; ?> 
     </td> 
    </tr> 
    </tbody> 
</table> 

Aber auf der Auf der letzten Seite wird der Tabellenfuß direkt unter dem Text angezeigt. Wenn der Text kürzer als die letzte Seite ist, bleibt der Fuß darauf haften.

Ich mag die Fußzeile auf der letzten Seite ganz unten sein. Leider ist die @ Page-Erweiterung funktioniert nicht in Firefox oder ich es falsch mache:

@page:last { 
    #footer { 
    position: absolute; 
    bottom: 0; 
    } 
} 

Answer 1

Wenn Sie nur Firefox unterstützen, ist dies eigentlich wirklich einfach (überspringen eine Technik zum Bearbeiten zu sehen, dass funktioniert auch im IE, ist aber weniger vielseitig). Fügen Sie einfach einen großen unteren Rand am Ende Ihres Inhalts hinzu. Es muss groß genug sein, um garantiert über das Ende der Seite hinaus zu laufen. Der Browser geht davon aus, dass Sie keine leere Seite am Ende Ihres Dokuments drucken möchten. Daher wird so viel Rand wie nötig abgeschnitten, um dies zu vermeiden. Halten Sie gerade genug, um Ihre Fußzeile an den unteren Rand der Seite zu verschieben.

Sie können den Rand auf eine pseudo-element setzen, um Ihr HTML sauber zu halten, und Sie können @media print verwenden, um zu verhindern, dass es auf dem Bildschirm angezeigt wird.

Hier ist der Code. Um zu sehen, wie es in Firefox funktioniert, öffnen Sie this jsfiddle, klicken Sie mit der rechten Maustaste auf die Ausgabe, wählen Sie This Frame> Nur diesen Frame anzeigen, und führen Sie eine Druckvorschau durch.

@media print { 
 
    #content:after { 
 
    display: block; 
 
    content: ""; 
 
    margin-bottom: 594mm; /* must be larger than largest paper size you support */ 
 
    } 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>PAGE HEADER</th> 
 
    </tr> 
 
    </thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td>PAGE FOOTER</td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td id="content"> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table>

Diese Technik funktioniert nicht in jedem Browser, aber Firefox. In IE, wenn ein Seitenumbruch in einem vertikalen Rand auftritt, wird der gesamte Rand entfernt - was ist eigentlich das richtige Verhalten according to the W3C (Abschnitt 13.3.3) - aber keine Sorge, das Verhalten von Firefox ist effektiv identisch, außer wenn es ein Tischfuß, und in diesem Fall ist es tatsächlich besser, also bezweifle ich, dass es sich jemals ändern wird.

Chrome und die anderen Webkit-Browser (Safari, Opera) unterstützen nicht einmal Fußzeilen, sind also irrelevant. Ich denke, ich habe diesen Ansatz in Edge nicht getestet, aber ich bin mir ziemlich sicher, dass es nicht funktionieren wird.

---

EDIT

Es gibt eine andere Option, die in Firefox und IE funktioniert. Alles, was Sie tun müssen, ist die Fußzeile in eine separate <div> und fixieren Sie es am unteren Rand der Seite, und verwenden Sie dann die Wiederholung <tfoot> als Abstandhalter. Dieser Ansatz hat jedoch einige kleinere Nachteile (Details unten).

Hier ist der Code. Um zu sehen, wie es in Firefox funktioniert, öffnen Sie this jsfiddle, klicken Sie mit der rechten Maustaste auf die Ausgabe, wählen Sie This Frame> Nur diesen Frame anzeigen, und führen Sie eine Druckvorschau durch. Klicken Sie im IE im Ausgabefenster auf, drücken Sie STRG + A, führen Sie eine Druckvorschau durch und ändern Sie "Wie auf dem Bildschirm ausgebreitet" auf "Wie auf dem Bildschirm ausgewählt".

@media print { 
 
    #spacer {height: 2em;} /* height of footer + a little extra */ 
 
    #footer { 
 
    position: fixed; 
 
    bottom: 0; 
 
    } 
 
}

<table> 
 
    <thead> 
 
    <tr> 
 
     <th>PAGE HEADER</th> 
 
    </tr> 
 
    <thead> 
 
    <tfoot> 
 
    <tr> 
 
     <td id="spacer"></td> 
 
    </tr> 
 
    </tfoot> 
 
    <tbody> 
 
    <tr> 
 
     <td> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content<br> 
 
     content<br>content<br>content<br>content<br>content<br>content<br>content 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
</table> 
 

 
<div id="footer"> 
 
    PAGE FOOTER 
 
</div>

Die wichtigste Einschränkung dieses Verfahrens ist, dass es auf jeder Seite in dem Druckauftrag eine identische Fußzeile setzt, was bedeutet, Sie keine Seiten mit einer anderen Fußzeile haben können, oder nicht Fußzeile. Da die Höhe des Abstandshalters von der Höhe der Fußzeile abhängt, müssen Sie sie anpassen, wenn sich die Fußzeilenhöhe ändert.

Answer 2

Das ist eine spaßige Frage, die ich noch nie gesehen habe, also habe ich auch etwas Neues gelernt. Aber hier ist meine Arbeits Lösung kurz (Sie waren eigentlich ziemlich nahe):

Mit einem #wrapper { position: relative }, die #header, #footer und #content{ position: absolute } und zusätzliche Lage und Höhe Regeln Ihre CSS (HTML unverändert) Sie sind volle Kontrolle über das Layout. Der Code könnte wie folgt aussehen:

unten Snippet, jsFiddle: fiddle und fiddle output frame

html,body { height: 100%; width: 100%; overflow: hidden } 
 

 
#wrapper { 
 
    position: relative; 
 
    height: 95%; width: 100%; 
 
} 
 
#wrapper #header { 
 
    position: absolute; 
 
    top: 0; 
 
    height: 100px; 
 
} 
 
#wrapper #content { 
 
    position: absolute; 
 
    top: 100px; 
 
} 
 
#wrapper #footer { 
 
    position: absolute; 
 
    bottom: 0; 
 
} 
 

 
@media print { 
 
    h1 { 
 
     page-break-before: always; 
 
    } 
 

 
    @page { 
 
     size: A4; 
 
     margin: 0; 
 
    } 
 
}

<table id="wrapper"> 
 
    <thead> 
 
    <tr> 
 
     <td id="header">HEADER TEXT</td> 
 
    </tr> 
 
    </thead> 
 

 
    <tfoot> 
 
    <tr> 
 
     <td colspan="0" id="footer"> 
 
      <img src="https://unsplash.it/200?image=031" /> 
 
     </td> 
 
    </tr> 
 
    </tfoot> 
 

 
    <tbody> 
 
    <tr> 
 
     <td id="content"> 
 
      Welcome 
 
      <h1>NEXT PAGE</h1> 
 
      just one line 
 
     </td> 
 
    </tr> 
 
    </tbody> 
 
    
 
</table>

Answer 3

Hallo Ich habe gerade die folgende Medienabfrage zu Ihrem CSS hinzugefügt. Und es WORKS

@media print { 
#footer { 
    position: absolute; 
    bottom: 0; 
    } 
} 

Überprüfen Sie die folgenden Geige

https://jsfiddle.net/jjsqgaza/