I am trying to get the thead and tfoot to appear on the top and bottom of each page when I print. The problem is that if the tbody content is not the correct height then the tfoot could be only half way down the page instead of at the bottom.
This is the jsfiddle of the code as far as i have it http://jsfiddle.net/zfw5F/
<div class="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> <!-- print_options -->
<table class="print_page">
<thead>
<tr>
<td>
<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>
</td>
</tr>
</thead> <!-- thead -->
<tbody>
<tr>
<td>
Dear John, <br>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus, laboriosam, ut, reiciendis quidem explicabo ipsum accusantium molestias nihil sint cumque eos repellendus rem excepturi rerum hic dolorum at iusto vel numquam accusamus nemo aut facilis blanditiis quasi quaerat nobis quisquam nisi inventore ex. Iusto, a, molestiae aliquam hic labore officia quae non ipsam libero obcaecati explicabo totam pariatur doloribus quasi mollitia! Reiciendis, excepturi, alias, quisquam commodi ducimus mollitia in iste harum facere consequatur animi doloribus accusantium quia blanditiis maiores voluptatibus architecto ex laborum modi eaque. Veritatis, explicabo deserunt consequatur cum quibusdam repudiandae rerum consequuntur at quia aut. Vero, architecto, porro, quis, molestias consequuntur possimus ipsa sint expedita asperiores quibusdam eius maiores explicabo quia hic molestiae magni deserunt fugit numquam provident fugiat. Accusamus, excepturi totam eveniet neque delectus hic quasi! Obcaecati, pariatur, dolor, voluptates recusandae cum ipsa sapiente id corporis quam totam laboriosam quia et omnis. Exercitationem excepturi corrupti repellat quis omnis. Illo, labore, quae rerum dicta atque ex maxime at incidunt aliquam libero ea delectus beatae ab veniam repellat amet architecto sunt dignissimos. Officiis, architecto, voluptatum, mollitia, iusto odit eaque error autem est quaerat quo deserunt sequi vel totam enim nostrum sunt fuga sint laudantium ab assumenda ex nobis earum. Ea explicabo dolorum quidem nostrum dicta architecto rerum. Suscipit, libero, delectus culpa unde officiis itaque magnam exercitationem eius aliquid tempora! Hic, officia, perspiciatis fugiat adipisci veniam consequuntur quasi expedita quae dolores assumenda officiis quo ex voluptas iure nobis dolorum aliquam dignissimos magni nesciunt quia ipsa debitis molestias nulla. Doloremque, assumenda, quae nulla magni atque dolorem sequi adipisci illum dolores. Aperiam, blanditiis sit asperiores excepturi vel deserunt vitae exercitationem fugiat quos nobis dolore laudantium beatae animi officiis praesentium obcaecati odio fuga quasi voluptate eius fugit tenetur incidunt quas rem tempora quidem placeat doloribus harum necessitatibus repellat at consequuntur alias aut. Quidem, ut itaque quod. Natus, magnam, deleniti dolores necessitatibus omnis dolore aut dolorem doloremque autem libero cupiditate explicabo voluptas delectus laboriosam ad sint voluptate ea quae fugit repellendus? Sunt, doloribus eum autem soluta vero fugiat obcaecati dolore repellendus placeat laudantium? Velit, quis, dicta ipsam accusamus repudiandae aliquid tempore sed tenetur ipsum modi consequatur architecto doloribus unde? Numquam, quasi laudantium atque tenetur ab voluptatibus ipsa velit magnam aliquam. A, non officia velit aliquid fugiat odit error commodi. Aliquam, laudantium placeat sequi incidunt sit consectetur vitae rerum! Iste, id, quos aspernatur assumenda optio odio accusamus quas tenetur fugiat aliquid tempora facilis eos asperiores sint nisi ipsum molestiae quis? Impedit, eos, eius ad iusto natus accusantium quam nobis. Maxime, distinctio est nulla ab delectus sequi voluptatum. Amet, iure aliquam cupiditate deserunt consectetur quod iusto sed mollitia! Velit, labore, provident, saepe, soluta ducimus deserunt officiis consectetur dignissimos maiores quas alias deleniti eaque iure nostrum non excepturi quos nobis veritatis corporis qui cupiditate quo tenetur molestias ab odio itaque quidem mollitia porro dolores eius dicta ipsum vero culpa sequi incidunt voluptas accusamus commodi beatae iste laudantium reprehenderit dolorem vitae voluptates hic et ratione? Qui, culpa, fugiat voluptas blanditiis optio minus tempore aperiam nulla cum pariatur autem saepe maiores enim. Aspernatur, totam modi deleniti voluptatem eum est harum architecto dolores. Nisi, autem, culpa magni corporis vitae odio non impedit doloribus soluta blanditiis fuga fugiat itaque atque laboriosam voluptate officia omnis. Veritatis, consequuntur maiores id soluta recusandae tempore unde odio accusamus tenetur iusto rem perferendis ullam ad sunt excepturi ratione perspiciatis inventore itaque harum amet! Nihil, ut, modi, autem alias aliquid porro sunt iure perferendis ad nemo a mollitia quae debitis ex doloribus hic fuga nesciunt culpa unde error cumque id labore ea nisi adipisci atque explicabo! Consectetur, aliquid, fugit, obcaecati, voluptatibus nisi aperiam quo itaque molestiae modi nobis eligendi vel totam eveniet consequuntur ab corporis expedita reiciendis quasi rem quia ullam non ea accusantium ratione porro nesciunt eius dolor tenetur officia praesentium harum sed a tempore magni odio suscipit soluta. Beatae, vero, cumque, voluptas, mollitia libero ad eveniet optio velit tenetur est asperiores natus commodi maiores modi odio maxime laborum doloribus quasi. Doloribus, laudantium, eius saepe perspiciatis voluptas fugiat ipsam deleniti repellendus harum doloremque ullam ducimus asperiores quas est reiciendis ut quaerat earum laborum delectus voluptates exercitationem nisi illum enim mollitia iste assumenda quod vel ad aut at totam iure expedita quia! Officia, architecto, vel, laborum, accusantium assumenda quae odio molestiae aut molestias maxime harum voluptatem recusandae vitae animi doloremque hic illum eaque tenetur optio reprehenderit nihil ullam provident natus labore voluptate iure quia aspernatur numquam ipsum corrupti distinctio debitis in omnis. Esse, placeat, cupiditate at eius vitae accusantium commodi quisquam magni vero nulla? Illum commodi laudantium quibusdam nobis officiis! Atque, eos, quia, eum dicta consectetur velit ratione quos asperiores nobis aperiam provident ipsum corporis quae! In, ullam, nobis, dolor, blanditiis similique ipsam officiis quos reprehenderit dolorum tempora earum assumenda impedit adipisci sed quibusdam eaque laborum facilis totam cumque ratione rerum repellat sapiente dignissimos nihil culpa. Delectus, natus, doloremque, eos, ea quae at voluptate corrupti ut hic asperiores itaque minus maiores laborum vel dolores magni incidunt tempore temporibus veniam voluptates soluta sunt doloribus mollitia voluptatum odio animi quibusdam fuga rerum laudantium inventore repellendus numquam ratione atque ipsam iste voluptatem commodi id. Ex, ipsam, dolor quasi adipisci perspiciatis excepturi eos dignissimos vitae iure culpa minus minima magni. Voluptatem, voluptatum ipsa molestias modi ducimus cum tempore explicabo rem. Tempore, aperiam, maxime, nostrum ut minima autem quae velit possimus amet quam est adipisci deleniti ea ad architecto. Porro, quisquam, saepe temporibus molestiae natus similique fugit dolore distinctio suscipit iste odio rem reiciendis deleniti sed enim. Cumque, voluptas, soluta numquam perspiciatis suscipit commodi ducimus odio odit veniam magni impedit adipisci amet quis doloribus dignissimos unde reprehenderit ad incidunt in dolore fugit delectus corporis tenetur officia illo sed distinctio fuga accusantium error pariatur voluptatibus explicabo eligendi dolorum! Ipsa, saepe asperiores voluptates velit quam quae illo necessitatibus temporibus exercitationem perferendis nobis facere. Veniam, fuga consectetur officiis molestias nam ex deleniti aperiam placeat provident debitis tempora soluta ducimus voluptatum blanditiis tempore. Blanditiis, soluta, ad officia eos voluptatum tenetur dolorum aliquid sit atque eum voluptas fugiat explicabo nulla illum consequatur necessitatibus animi amet alias doloremque.
</td>
</tr>
</tbody> <!-- tbody -->
<tfoot>
<tr>
<td>
<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>
</td>
</tr>
</tfoot> <!-- tfoot -->
</table> <!-- table -->
</div> <!-- wrapper -->
.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_footer{
float: left;
width: 100%;
margin: 1em 0 0 0;
font-size: 0.9em;
}
.print_footer_left{
float: left;
}
.print_footer_right{
float: right;
text-align: right;
}
@page{
margin: 0;
}
@media print {
.wrapper{width: 90%; margin: auto; position: relative;}
thead { display: table-header-group; }
tfoot { display: table-footer-group;}
.print_page{border: none; box-shadow: none;}
.print_options{display: none;}
}