You can do this by inserting the header and footer elements after the elements that appear in the first page.
For example :
<style>
.flyleaf {
page-break-after: always;
}
.header, .footer {
position: fixed;
}
.header {
top: 0;
}
.footer {
bottom: 0;
}
</style>
<div class="flyleaf">
Some big title
</div>
<div class="header">
my header
</div>
<div class="footer">
my footer blah, blah
</div>
<p>The content</p>
Edit: added the style tag
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…