Print HTML Template with Header & Footer

HTML Template to Print Header and Footer on Every page on a document:

create printable HTML pages employing a reusable template with a header and a footer that repeat on every page.

While developing a project, we need to print out various documents for mailing, book keeping and archiving. To achieve this we had to be able to produce HTML pages with the following requirements:

1. Every page must have a predefined header and footer.

2. Content may span over multiple pages.

METHOD A: Fixed Position

Elements with css property position set to fixed will “stick” to the sides of the page by setting top or bottom to 0. They will also repeat on each printed page. Here is a simplified example:

// HTML<div class=”header”>…</div>
<div class=”content”>…</div>
<div class=”footer”>…</div>// CSS.header {
position: fixed;
top: 0;
}.footer {
position: fixed;
bottom: 0;
}

This method works great once you are only printing one page.

METHOD B — Table

But if your content is longer than a single page, the header and footer will overlap the content on consecutive pages:

By default thead and tfoot repeat on all printed page.

// HTML<table>
<thead>
<tr><td>
<div class=”header”>…</div>
</td></tr>
</thead>
<tbody>
<tr><td>
<div class=”content”>…</div>
</td></tr>
</tbody>
<tfoot>
<tr><td>
<div class=”footer”>…</div>
</td></tr>
</tfoot>
</table>

Sounds great, but the disadvantage in this method is that the footer part will “stick” to the bottom of every page except the last page, where it will “stick” to the bottom of the content:

METHOD-C:

So by merging the two methods I can create a template that will meet my requirements.

The general strategy is to use the table method to create empty “place-holders” that will prevent the content from overlapping the header/footer. We’re keeping it empty so that on the last page nothing will be shown. Then, we will use the fixed-position method to put the particular header/footer inside the empty place-holders:

// HTML <table>
<thead><tr><td>
<div class=”header-space”> </div>
</td></tr></thead>
<tbody><tr><td>
<div class=”content”>…</div>
</td></tr></tbody>
<tfoot><tr><td>
<div class=”footer-space”> </div>
</td></tr></tfoot>
</table><div class=”header”>…</div>
<div class=”footer”>…</div>// CSS.header, .header-space,
.footer, .footer-space {
height: 100px;
}.header {
position: fixed;
top: 0;
}.footer {
position: fixed;
bottom: 0;
}

METHOD -D:

For HTML & CSS Click Click Here

CSS:

footer { font-size: 9px; color: #f00; text-align: center;}

@page { size: A4; margin: 11mm 17mm 17mm 17mm;}

@media print { footer { position: fixed; bottom: 0; }

.content-block, p { page-break-inside: avoid; } html,

body { width: 210mm; height: 297mm; }}

HTML:

<html> <head></head> <body> <h1> Example Document </h1> <div> <p> This is an example document that shows how to have a footer that repeats at the bottom of all pages, but also isn’t covered up by paragraph text. </p> </div> <div> <h3> Example Section I </h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit. Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. Vestibulum bibendum molestie dui nec tincidunt. Mauris tempus, orci ut congue vulputate, erat orci aliquam orci, sed eleifend orci dui sed tellus. Pellentesque pellentesque massa vulputate urna pretium, consectetur pulvinar orci pulvinar. Donec aliquet imperdiet ex, et tincidunt risus convallis eget. Etiam eu fermentum lectus, molestie eleifend nisi. nascetur ridiculus mus. Nullam dignissim, erat vitae congue molestie, ante urna sagittis est, et sagittis lacus risus vitae est. Sed elementum ipsum et pellentesque dignissim. Sed vehicula feugiat pretium. Donec ex lacus, dictum faucibus lectus sit amet, tempus hendrerit ante. Ut sollicitudin sodales metus, at placerat risus viverra ut. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Duis finibus vestibulum finibus. Nunc lobortis lacus ut libero mattis tempor. Nulla a nunc at nisl elementum congue. Nunc eu consectetur mauris. Etiam non placerat massa. Etiam eu urna in metus tempus molestie sed eget diam. Nunc sem velit, elementum sit amet fringilla in, dictum sit amet sem. Quisque convallis faucibus purus dignissim dictum. Sed semper, mi vel accumsan sollicitudin, massa massa pellentesque justo, eget auctor sapien enim ac elit. Nullam turpis augue, lacinia ut libero ac, rhoncus bibendum ligula. Mauris ullamcorper maximus turpis, a consequat turpis bibendum sit amet. Nam vitae dui nec velit hendrerit faucibus. Vivamus nunc diam, porta tristique augue nec, dignissim venenatis felis. Proin mattis id risus in feugiat. Etiam cursus faucibus nisi. In in nisi ullamcorper, convallis lectus et, ornare nulla. Cras tristique nulla eros, non maximus odio imperdiet eu. Nullam egestas dignissim est, et fringilla odio pretium eleifend. Nullam tincidunt sapien fermentum, rhoncus risus ac, ullamcorper libero. </p> </div> <div class=“content-block”> <h3>Example Section II</h3> <p> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc vestibulum metus sit amet urna lobortis sollicitudin. Nulla mattis purus porta lorem tempor, a cursus tellus facilisis. Aliquam pretium nibh vitae elit placerat vestibulum. Duis felis ipsum, consectetur id pellentesque in, porta sit amet sapien. Ut tristique enim sem, laoreet bibendum nisl fermentum vitae. Ut aliquet sem ac lorem malesuada sodales. Fusce iaculis ipsum ex, in mollis dolor dapibus sit amet. In convallis felis in orci fermentum gravida a vel orci. Sed tincidunt porta nibh sit amet varius. Donec et odio eget odio tempus auctor ac eget ex. Pellentesque vitae augue sed purus dictum ultricies at eu neque. Nullam ut mauris a purus tristique euismod. Sed elementum, leo id placerat congue, leo tellus pharetra orci, eget ultricies odio quam sit amet ipsum. Praesent feugiat, lorem at commodo egestas, felis ligula pharetra sapien, in placerat mauris nisi aliquet tortor. Quisque nibh lectus, laoreet vel mollis a, tincidunt vel ipsum. Sed blandit vehicula sollicitudin. Donec et sapien justo. Ut fermentum ipsum imperdiet diam condimentum, eget varius sapien dictum. </p> </div> <footer> This is the text that goes at the bottom of every page. </footer> </body></html>

CSS

Print HTML Template with Header & Footer

HTML Template to Print Header and Footer on Every page on a document:

create printable HTML pages employing a reusable template with a header and a footer that repeat on every page.

While developing a project, we need to print out various documents for mailing, book keeping and archiving. To achieve this we had to be able to produce HTML pages with the following requirements:

1. Every page must have a predefined header and footer.

2. Content may span over multiple pages.

METHOD A: Fixed Position

Elements with css property position set to fixed will “stick” to the sides of the page by setting top or bottom to 0. They will also repeat on each printed page. Here is a simplified example:

// HTML<div class=”header”>…</div>
<div class=”content”>…</div>
<div class=”footer”>…</div>// CSS.header {
position: fixed;
top: 0;
}.footer {
position: fixed;
bottom: 0;
}

This method works great once you are only printing one page.

METHOD B — Table

But if your content is longer than a single page, the header and footer will overlap the content on consecutive pages:

By default thead and tfoot repeat on all printed page.

Sounds great, but the disadvantage in this method is that the footer part will “stick” to the bottom of every page except the last page, where it will “stick” to the bottom of the content:

METHOD-C:

So by merging the two methods I can create a template that will meet my requirements.

METHOD -D:

For HTML & CSS Click Click Here

CSS:

HTML:

Comments

Click here to cancel reply.

CONTACT US

We are social:

Visitor Counter

CSS

Print HTML Template with Header & Footer

HTML Template to Print Header and Footer on Every page on a document:

create printable HTML pages employing a reusable template with a header and a footer that repeat on every page.

While developing a project, we need to print out various documents for mailing, book keeping and archiving. To achieve this we had to be able to produce HTML pages with the following requirements:

1. Every page must have a predefined header and footer.

2. Content may span over multiple pages.

METHOD A: Fixed Position

Elements with css property position set to fixed will “stick” to the sides of the page by setting top or bottom to 0. They will also repeat on each printed page. Here is a simplified example:

// HTML<div class=”header”>…</div> <div class=”content”>…</div> <div class=”footer”>…</div>// CSS.header { position: fixed; top: 0; }.footer { position: fixed; bottom: 0; }

This method works great once you are only printing one page.

METHOD B — Table

But if your content is longer than a single page, the header and footer will overlap the content on consecutive pages:

By default thead and tfoot repeat on all printed page.

Sounds great, but the disadvantage in this method is that the footer part will “stick” to the bottom of every page except the last page, where it will “stick” to the bottom of the content:

METHOD-C:

So by merging the two methods I can create a template that will meet my requirements.

METHOD -D:

For HTML & CSS Click Click Here

CSS:

HTML:

Comments

Click here to cancel reply.

CONTACT US

We are social:

Visitor Counter

// HTML<div class=”header”>…</div>
<div class=”content”>…</div>
<div class=”footer”>…</div>// CSS.header {
position: fixed;
top: 0;
}.footer {
position: fixed;
bottom: 0;
}