html5标签写页眉页脚,Html 打印模板 （带页眉页脚）

.page-header, .page-header-space {

height: 80px;

}

.page-footer, .page-footer-space {

height: auto;

}

.page-footer {

position: fixed;

bottom: 0;

width: 100%;

border-top: 1px solid black; /* for demo */

background: yellow; /* for demo */

}

.page-header {

position: fixed;

top: 0mm;

width: 100%;

/* border-bottom: 1px solid black; for demo */

background: yellow; /* for demo */

}

.page {

page-break-after: always;

}

@page {

/* margin: 20mm*/

margin-top: 0.25in;

}

@media print {

thead {display: table-header-group;}

tfoot {display: table-footer-group;}

body {margin: 0;}

}

I'm The Header

Header	Header	Header	Header	Header
123	123	123	123	123
123	123	123	123	123
123	123	123	123	123
123	123	123	123	123
123	123	123	123	123
123	123	123	123	123
123	123	123	123	123
123	123	123	123	123
123	123	123	123	123

PAGE 1

PAGE 2

PAGE 3 - Long Content

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tincidunt metus eu consectetur rutrum. Praesent tempor facilisis dapibus. Aliquam cursus diam ac vehicula pulvinar. Integer lacinia non odio et condimentum. Aenean faucibus cursus

mi, sed interdum turpis sagittis a. Quisque quis pellentesque mi. Ut erat eros, posuere sed scelerisque ut, pharetra vitae tellus. Suspendisse ligula sapien, laoreet ac hendrerit sit amet, viverra vel mi. Pellentesque faucibus nisl et dolor

pharetra, vel mattis massa venenatis. Integer congue condimentum nisi, sed tincidunt velit tincidunt non. Nulla sagittis sed lorem pretium aliquam. Praesent consectetur volutpat nibh, quis pulvinar est volutpat id. Cras maximus odio posuere

suscipit venenatis. Donec rhoncus sceler