I need to move the header and footer to the next page automatically if there is more information in the table than is enough for one page. How can this be done?
I have a VF page render as pdf like that:

<div class="header">
            <header class="clearfix">
                <h1></h1>
                <div id="logo">
                    <img src="logo.png"/>
                </div>
                <div id="company" class="clearfix">
                    <div id="invoice">INVOICE</div>
                    <br/>
                    <div>{!TODAY()}<hr/></div>
                    <br/>
                    <div>INVOICE NO.<hr/></div>
                </div>
                <div id="project">
                    <div>{!orgDetails.Name}</div>
                    <div>!orgDetails.Address</div>
                    <div>
                        <apex:repeat value="{!opportunity}" var="op">
                            <div>
                                
                            </div>
                        </apex:repeat>
                    </div>
                </div>
            </header>
        </div>
        <main>
            <div class="bill">
                BILL TO
                <hr/>
                <apex:repeat value="{!contactRoles}" var="cr">
                    <p>{!cr.Contact.Name}</p>
                    <p>{!cr.Contact.OwnerId}</p>
                    <p>{!cr.Contact.Phone}</p>
                    <p>{!cr.Contact.Email}</p>
                </apex:repeat>
                
            </div>
            <table>
                <thead>
                    <tr>
                        <th>PRODUCT NAME</th>
                        <th>QTY</th>
                        <th>UNIT PRICE</th>
                        <th>TOTAL</th>
                    </tr>
                </thead>
                <tbody>
                    <apex:repeat value="{!opportunityLineItem}" var="opl">
                        <tr id="main">
                            <td class="Name">{!opl.Name}</td>
                            <td class="qty">{!opl.Quantity}</td>
                            <td class="unit">{!opl.UnitPrice}</td>
                            <td class="total">{!opl.TotalPrice}</td>
                            <td colspan="3" class="grand total">Balance Due</td>
                            <td class="color">1534251</td>
                        </tr>
                    </apex:repeat>
                    
                </tbody>
            </table>
        </main>
        <footer>
            <div>{!orgDetails.Name}</div>
        </footer>