Menu
<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>
I want to print #header and #footer on every page in print mode. I searched a lot but nothing seems to work, even position:fixed doesn't work as expected.
540
Click the Effects menu on the Detailed Settings tab. Select the Header/Footer check box. Select the items that you want to print on header and footer, Date and Time, Page Number, and Text.
In the File tab, click Print, click Page Setup, and then click the Legend tab. Under Legend on, click Every page, Legend page, or None. See Customize printing of a legend or title for more information. The header and footer that you set will appear on every page.
To create a header or footer Click the Printer tab. Select Header or Footer. Enter any text you want to appear in the header or footer in the Header/Footer text field. Optional: Use the information in the table below to insert page numbers, total number of pages, date, time, tab, or title automatically.
The most common cause of this problem is that the bottom margin, footer margin, or page border is outside the printable area of the page. All printers have an irreducible unprintable area necessitated by the mechanical requirements of paper handling.
If you're willing to switch over to tables for your layout (not necessarily ideal), you can do it with the <thead> and <tfoot> elements. They'll print at the top and bottom of every page:
<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>
Another option is to use display table-header-group and table-footer-group but cross-browser support isn't great:
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
I think I arrived too late :), but I was looking for something like this, and I found one answer that helps me (source https://www.youtube.com/watch?v=yDgFLysON98). I wrote the div tag before and after the content like this
<div id="header">Top div content</div>
.
.
.
<div id="footer">Bottom div content</div>
Example:
<!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>
... I hope this helps.
37
For that you need to use the mso (microsoft office css properties) in your style:
<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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
