CSS標準では、いくつかの高度なフォーマットが可能です。@page
CSSには、ページングされたメディア(紙など)にのみ適用されるフォーマットを可能にするディレクティブがあります。http://www.w3.org/TR/1998/REC-CSS2-19980512/page.htmlを参照してください。
欠点は、異なるブラウザーでの動作に一貫性がないことです。Safariはまだプリンターページのマージンの設定をまったくサポートしていませんが、他のすべての主要なブラウザーがサポートしています。
では@page
ディレクティブは、(HTML要素の通常のCSSマージンと同じではありません)ページのプリンタマージンを指定することができます。
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
html
{
background-color: #FFFFFF;
margin: 0px; /* this affects the margin on the html before sending to printer */
}
body
{
border: solid 1px blue ;
margin: 10mm 15mm 10mm 15mm; /* margin you want for the content */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>
ヘッダーとフッターを削除する効果を得るために、ここでは基本的にページ固有のマージンを無効にしているため、本文に設定したマージンは改ページで使用されないことに注意してください(Konradによるコメント)これは機能するだけです。印刷されたコンテンツが1ページのみの場合は適切に。
これは、Firefox 3.6、IE 7、Safari 5.1.7、またはGoogle Chrome 4.1 では機能しません。。
@pageマージンの設定は、IE 8、Opera 10、Google Chrome 21およびFirefox 19で有効です。
これらのブラウザーのコンテンツのページ余白は正しく設定されていますが、ヘッダー/フッターの非表示を解決しようとする場合、この動作は理想的ではありません。
これは、さまざまなブラウザでの動作です。
Internet Explorer、マージンは、実際には、この印刷の設定に0ミリメートルに設定されている、とあなたがプレビューを行う場合は、デフォルトとして0ミリメートルを取得しますが、ユーザがプレビューでそれを変更することができます。
ページコンテンツが実際に正しく配置されていることがわかりますが、ブラウザーの印刷ヘッダーとフッターは透明でない背景で表示されているため、その位置でページコンテンツを効果的に非表示にしています。
でFirefoxの新しいバージョン、それがされて配置され、正しく、それは悪い、ブラウザのヘッダーテキストのミックスとあなたのページのコンテンツのように見えるように、ヘッダー/フッターのテキストやコンテンツのテキストの両方が表示されます。
でオペラコンテンツと標準CSSとヘッダ/フッタ位置競合に不透明な背景を使用する場合、ページコンテンツは、ヘッダーを非表示にします。かなり良いですが、マージンが小さい値に設定されていて、ヘッダーが部分的に表示されていると、奇妙に見えます。また、ページ余白が正しく設定されていません。
クロム @pageマージンがコンテンツとヘッダ/フッタ位置競合ほど小さく設定されている場合、より新しいバージョン、ブラウザのヘッダーとフッターが隠されています。私の意見では、これはまさにこれがどのように振る舞うべきかです。
したがって、結論は、ヘッダー/フッターを非表示にすることに関して、Chromeがこれを最も適切に実装しているということです。