it-swarm.com.de

Kopf-/Fußzeile auf allen Seiten drucken (Druckmodus)

<div id="header">header</div>
<div id="content">
    content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>

Ich möchte #header und #footer auf jeder Seite im Druckmodus drucken. Ich habe viel gesucht, aber nichts scheint zu funktionieren, selbst position:fixed funktioniert nicht wie erwartet.

23
3zzy

Wenn Sie bereit sind, für Ihr Layout zu Tabellen zu wechseln (nicht unbedingt ideal), können Sie dies mit den Elementen <thead> und <tfoot> tun. Sie werden oben und unten auf jeder Seite gedruckt:

<table>

  <thead>
     <!-- Will print at the top of every page -->
  </thead>

  <tbody>
     <!-- Page content -->
  </tbody>

  <tfoot>
     <!-- Will print at the bottom of every page -->
  </tfoot>

</table>

Eine andere Option ist die Verwendung von Anzeige table-header-group und table-footer-group, aber die browserübergreifende Unterstützung ist nicht großartig:

#header {
  display: table-header-group;
}

#main {
  display: table-row-group;
}

#footer {
  display: table-footer-group;
}
25
Pat

Ich glaube, ich bin zu spät gekommen :), aber ich habe nach so etwas gesucht und eine Antwort gefunden, die mir hilft (Quelle https://www.youtube.com/watch?v=yDgFLysON98 ). Ich habe das Div-Tag vor und nach dem Inhalt so geschrieben

<div id="header">Top div content</div>

.
.
.
<div id="footer">Bottom div content</div>

Beispiel:

<!DOCTYPE html>
<html>
<head>``
<style>
body {
    background-color: #CCC;
    margin:48px 0px 0px 64px;
}
div#header {
    position:fixed;
    top:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
div#footer {
    position:fixed;
    bottom:0px;
    left:0px;
    width:100%;
    color:#CCC;
    background:#333;
    padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>

... Ich hoffe das hilft.

4
Oscar Albert

Dafür müssen Sie die mso (Microsoft Office CSS-Eigenschaften) in Ihrem Stil verwenden:

<style><--
@page 
{
    size:21cm 29.7cmt;
    margin:1cm 1cm 1cm 1cm; 
    mso-title-page:yes;
    mso-page-orientation: portrait;
    mso-header: header;
    mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
2

Nisse Engstroms Antwort ist richtig. Sie müssen nur den Inhalt von thead und tfoot in ein tr einfügen, damit es funktioniert. Und es ist auch die beste Methode, denn wenn Sie absolute Positionierung in einem div für Kopf- und Fußzeilen verwenden, überlappen sie sich immer mit dem Inhalt des Hauptkörpers auf der Nächste Seite.

    
    <table>
    
    <thead>
    <tr> !-- these are important
    <th id="header"> !--- these are important
        !--- content of header here
    </th>
    </tr>
    </thead>
    
    <tbody>
    <tr>
    <td>
    !---- main body here
    </td>
    </tr>
    </tbody>
    
    <tfoot>
    <tr>
    <th id="footer">
    
        !----- content of footer here
    </th>
    </tr>
        </tfoot>
    
        </table>
    

0
Shrey Gupta