<div id="header">header</div>
<div id="content">
content spanning several pages...
</div>
<div id="footer">Footer - Fixed at the bottom of each page</div>
印刷したい#header
および#footer
on every印刷モードのページ。よく検索しましたが、うまくいかないようです。position:fixed
は期待どおりに機能しません。
レイアウト用のテーブルに切り替えたい場合(必ずしも理想的ではありません)、<thead>
および<tfoot>
要素。すべてのページの上部と下部に印刷されます。
<table>
<thead>
<!-- Will print at the top of every page -->
</thead>
<tbody>
<!-- Page content -->
</tbody>
<tfoot>
<!-- Will print at the bottom of every page -->
</tfoot>
</table>
別のオプションは、ディスプレイtable-header-group
およびtable-footer-group
しかし、クロスブラウザのサポートは素晴らしいものではありません。
#header {
display: table-header-group;
}
#main {
display: table-row-group;
}
#footer {
display: table-footer-group;
}
到着が遅すぎると思います:)、しかし、私はこのようなものを探していました、そして私は私を助ける1つの答えを見つけました(ソース https://www.youtube.com/watch?v=yDgFLysON98 )。このようなコンテンツの前後にdivタグを書きました
<div id="header">Top div content</div>
.
.
.
<div id="footer">Bottom div content</div>
例:
<!DOCTYPE html>
<html>
<head>``
<style>
body {
background-color: #CCC;
margin:48px 0px 0px 64px;
}
div#header {
position:fixed;
top:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
div#footer {
position:fixed;
bottom:0px;
left:0px;
width:100%;
color:#CCC;
background:#333;
padding:8px;
}
</style>
</head>
<body>
<div id="header">HEADER</div>
<h1>Page Heading</h1>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<p>Content placeholder ...</p>
<div id="footer">FOOTER</div>
</body>
</html>
...これがお役に立てば幸いです。
そのためには、スタイルでmso(Microsoft Office CSSプロパティ)を使用する必要があります。
<style><--
@page
{
size:21cm 29.7cmt;
margin:1cm 1cm 1cm 1cm;
mso-title-page:yes;
mso-page-orientation: portrait;
mso-header: header;
mso-footer: footer;
}
@page content {margin: 1cm 1cm 1cm 1cm;}
div.content {page: content;}
</style>
Nisse Engstromsの答えは正しいです。 theadとtfootのコンテンツをtr内に配置するだけで機能します。また、divで絶対配置を使用してヘッダーとフッターを作成すると、常にメインのコンテンツとオーバーラップするため、これも最適な方法です。次のページ。
<table>
<thead>
<tr> !-- these are important
<th id="header"> !--- these are important
!--- content of header here
</th>
</tr>
</thead>
<tbody>
<tr>
<td>
!---- main body here
</td>
</tr>
</tbody>
<tfoot>
<tr>
<th id="footer">
!----- content of footer here
</th>
</tr>
</tfoot>
</table>