我希望在每个打印页面上打印页眉和页脚。用户创建一个字母或报告，当去查看它时，该字母将出现在浏览器中。用户可以从那里打印出来。顶部的选项按钮消失，边框被删除。如果内容足够长，我希望页眉和页脚在每个页面上打印并继续内容。我可以使打印工作正常并且尺寸正确。
<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;}
}
答案 0 :(得分：0)
在表格结构中，将以下显示定义添加到thead和tfoot，您可以在每个页面上打印页眉和页脚
thead { display: table-header-group; }
tfoot { display: table-footer-group; }
但是，我不确定这对div元素是否正常。
尝试在.print_header和.print_footer！