Print page header and footer on each page

Question

I am looking to print a header and footer on each page that gets printed. The user creates a letter or report and when goes to view it the letter will appear in the browser. From there the user can print it off. The options buttons at the top disappear and the border is removed. Howerver if the content is long enough I want the header and footer to print on each page with the content continuing. I can get the print working ok and to the right dimensions.

http://jsfiddle.net/g7bqG/

<div class="print_wrapper">
    <div class="print_options">
        <a href="#" onclick="self.close()"><i class="icon-remove"></i> Close</a>
        |
        <a href="{$base_url}residential-lettings/suppliers/generate-letter-pdf/supplier/{$supplier.id}/letter/{$letter.id}"><i class="icon-copy"></i> PDF</a>
        |
        <a href="#" onclick="window.print()"><i class="icon-print"></i> Print</a>  
    </div>

    <div class="print_page">
        <div class="print_header">
            <div class="print_header_logo">
                <h1 class="showhouse-text">Laagro</h1>                  
            </div>
            <div class="print_header_address">
                <p>
                    New Somewhere House <br>
                    123 Somewhere Avenue <br>
                    Newry <br>
                    Down <br>
                    BT35 ABC <br>
                    UK
                </p>
            </div>
        </div>

        <div class="print_content">
            <p>Dear Bob</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
            <p>Numquam, quam, aut beatae impedit id dolore doloribus sequi voluptatibus ad quae aspernatur similique vero vel qui ipsum fugit magnam non enim itaque hic. Reiciendis, possimus, magni, ex ea aliquid at optio molestias placeat ab blanditiis ipsum obcaecati cum excepturi quidem neque tempora eum odio voluptatem ipsam officiis quisquam harum quibusdam numquam pariatur sapiente et inventore sit in voluptatibus veritatis doloremque id aut aliquam. Incidunt, atque, minima labore iste cumque ad pariatur qui possimus ut libero inventore corporis perspiciatis nam voluptatem temporibus fugiat impedit culpa dolorem quo provident placeat amet delectus reiciendis rerum repudiandae quisquam similique quis aspernatur in voluptas optio at nulla aliquam numquam beatae dolores ab sint architecto molestiae sapiente commodi quam officiis quas veniam repellendus suscipit! Sequi, voluptate sapiente assumenda commodi. Maxime, nobis, corporis, doloremque, fugit modi sint iste aliquam maiores sequi voluptatum libero doloribus illum placeat nisi tempora natus aliquid. Harum, eius consequuntur asperiores.</p>
            <p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
            <p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
            <p>Numquam, quam, aut beatae impedit id dolore doloribus sequi voluptatibus ad quae aspernatur similique vero vel qui ipsum fugit magnam non enim itaque hic. Reiciendis, possimus, magni, ex ea aliquid at optio molestias placeat ab blanditiis ipsum obcaecati cum excepturi quidem neque tempora eum odio voluptatem ipsam officiis quisquam harum quibusdam numquam pariatur sapiente et inventore sit in voluptatibus veritatis doloremque id aut aliquam. Incidunt, atque, minima labore iste cumque ad pariatur qui possimus ut libero inventore corporis perspiciatis nam voluptatem temporibus fugiat impedit culpa dolorem quo provident placeat amet delectus reiciendis rerum repudiandae quisquam similique quis aspernatur in voluptas optio at nulla aliquam numquam beatae dolores ab sint architecto molestiae sapiente commodi quam officiis quas veniam repellendus suscipit! Sequi, voluptate sapiente assumenda commodi. Maxime, nobis, corporis, doloremque, fugit modi sint iste aliquam maiores sequi voluptatum libero doloribus illum placeat nisi tempora natus aliquid. Harum, eius consequuntur asperiores.</p>
            <p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
            <p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Vitae, repellat, magni, deleniti placeat obcaecati voluptatem alias voluptate laudantium necessitatibus voluptatum dolorem quod earum quo sapiente magnam atque non animi enim natus voluptatibus beatae debitis ipsa. Facilis atque aperiam id nobis perspiciatis debitis dolorum architecto reprehenderit. Cupiditate, illo asperiores animi enim ad velit culpa dolorem nesciunt similique tempora perspiciatis facilis doloremque saepe id consequatur!</p>
            <p>Recusandae, error, aperiam totam laborum magnam distinctio architecto numquam quae nostrum fuga reprehenderit tenetur minima excepturi itaque vel pariatur rem suscipit ex. Repellendus ipsa placeat deleniti rerum praesentium voluptatibus sapiente nihil quidem magni. Quos, sapiente ea deserunt asperiores molestiae?</p>
            <p>Regards,<br>
            Pierce</p>
        </div>

        <div class="print_footer">
            <div class="print_footer_left">
                <p>Company Reg No. 045 AB6</p>
            </div>
            <div class="print_footer_right">
                <p>Registered Office Address: 123 Somewhere Avenue, </p>
            </div>
        </div>

    </div>
</div>

.print_wrapper{
    width: 21cm;
    margin: auto;
}
.print_options{
    float: right;
}
.print_page{
    background: white; 
    font-size: 12pt; 
    float: left;
    padding: 10px;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.print_header{
    float: left;
    clear: both;
    width: 100%;
}
.print_header_logo{
    float: left;
}
.print_header_address{
    float: right;
    text-align: right;
    font-size: 0.7em;
    margin: 1.5em 0 0 0;
}
.print_content{
    float: left;
    font-size: 0.9em;
    margin: 1em 0 0 0;
}
.print_footer{
    float: left;
    width: 100%;
    margin: 1em 0 0 0;
    font-size: 0.9em;
    border-top: 1px solid #000;
}
.print_footer_left{
    float: left;
}
.print_footer_right{
    float: right;
    text-align: right;
}
@page {
    size: A4;
    margin: 0;
}
@media print{
    .print_options{display: none;}
    .print_wrapper{width: 90%;}
    .print_page{border: none; box-shadow: none;}
}

Answer 1

In a table structure adding these display definitions below to thead and tfoot you can print header and footer on each page

thead { display: table-header-group; }
tfoot { display: table-footer-group; }

However, i'm not sure this work fine with div elements. Try add these displays in your .print_header and .print_footer !