Force contents onto new print page if div height is reached

Question

I have an HTML/CSS printable form that gets generates with content from a MySQL database using PHP. I am having a hard time figuring out how to get the middle content section to print another page if the content section is full. I need to keep the logo and order total section in place and only keep track of the middle content section.

Is there a way to do this with JavaScript? Or what is the best solution for this issue?

Attached are screenshot markups to help see the issue.

http://timkipptutorials.com/images/linked/page1.png http://timkipptutorials.com/images/linked/page2.png

Answer 1

Printing headers and footers on every page is very difficult task, if you use div tags. In my project I had searched almost full web and found that for printing the Headers and Footers every page you have to use tables and CSS rules, without using table and css you can't do printing of headers on every page. I am providing you the code for doing so as under:

<style>
    @media screen{thead{display:none;}}
    @media print{thead{display:table-header-group; margin-bottom:2px;}}
    @page{margin-top:1cm;margin-left:1cm;margin-right:1cm;margin-bottom:1.5cm;}}
</style>

First CSS rule make that thead of table would not be displayed on the screen for the user and Second rule defines that during printing thead is displayed as table-header-group as this rule would show header on every page if you omit this headers would not print on each page and third rule is for maintaining the page margins from overlapping of header or footers and your html code would be as under:

<table>
    <thead>
        <tr>
            <th>  <---  Your header text would be placed here    --->  </th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>
                <--- Your printing text would be place here    ---> 
            </td>
        </tr>
    </tbody>
</table>

Last thing, I have tried thing code on IE, Safari, Firefox and Chrome and would like to tell you that on Chrome the header is printed only on 1st page. I had also reported the bug many times but Chrome is not doing any thing about this issue.