CSS & HTML book for print - html

Question

Okay, so hypothetically, let's say I wanted to write a book using HTML and CSS only. How would I go about defining a page header and footer (and have page numbers in the footer)? And how would I make it so that page breaks and margins show up in the browser (like a preview mode)?
I know it sounds like I'm asking for someone to just write the code for me, but I really just need direction to resources for something like this. I'm just completely stuck on how I would even begin to do something like this.
To explain what I want to show in the browser; I want to be able to see small versions of each page like you would in a PDF viewer, basically the text overflow would create a page-break:
I have looked into #media print, but that doesn't have any hooks for creating headers and footers.
and I can't get this to work (from w3.org):
title { position: running(header) }
#page { #top-center {
content: element(header) }
}
I have looked at the code from Boom!, and It's nice for printing, but it doesn't display in browser the same.
So... does anyone now where I could/should look for a good starting point for this?

Answer 1

This was my solution:
<div id='document'>
<div class='page'>
<div class='header'></div>
<div class='footer'></div>
<div class='content'></div>
</div>
</div>
Everything went in <div id='document'>. For each .page, the .header, .footer, and .content had the right height and width for a page.
After that, I used JavaScript to cut out everything that was overflowing outside the div.content. I then cloned div.page, updated the page number inside of the new page's header <div>, and filled the new page's content <div>.
This was repeated until I had like 100 pages and nothing was sticking out of the last page's content <div>.

Answer 2

I am assuming that you are using pure HTML and there is no code behind.
Because if there is any code behind then its a different story.
Define a main div having class="page". Inside that define 3 divs for header, content and
footer.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
}
.header {
display: block;
height: 50px;
}
.content {
display: block:
height: 700px;
}
.footer {
display: block;
height: 50px;
}
Add additional style as per your requirement.
create another style sheet with media type ="print"
There add the following style for page.
.page {
display: block;
height: 800px;
width: 100%;
/*Give margin as per your requirement.*/
/* this will print the page in new paper*/
page-break-after: always;
}
and the HTML for one page will look like this
<div class="page">
<div class="header">HEADER CONTENT</div>
<div class="content"> MAIN PAGE'S CONTENT</div>
<div class="footer"></div>
</div>
Repeat the above code an per the number of page you need.
You can also use table layout for this purpose.
And if you use code behind, then the content can be generated dynamically.
Hope this helps.

Answer 3

Well, it could be done by pure HTML and CSS but definitely not the way to go as it would become very frustrating to repeat blocks of code, almost the same, every time you wanted to start a new page. For the PDF like left panel you could use Iframes, more info here
basically, you would make a .htm page for every page of your book, strictly linked together by links, and when you would be finished, you could take a screenshot of every page you made, save the thumbnails, and make another html page that would be the panel, which would be eventually included (as the tutorial in my link shows) in all the other pages for the book.
UPDATE
Regarding page breaks, you could make div-s with the same class, and styled as pages, as shown here