htmlページのカスタムヘッダーとフッター

印刷モードですべてのページにヘッダーとフッターを入れたいと思います。私はそれについて多くの研究をしました。htmlページのカスタムヘッダーとフッター

私は2つの解決策を見つけました。しかし、それらはクロスブラウザではありません（IE、Firefox、Chromeで動作させたい）

最初の解決策：コンテンツテーブルの上下に余白を設定しています。次に、固定位置でこのスペースにヘッダーとフッターを書きます。それはFirefoxで完璧に動作しています。しかし、IEとクロムではマージンを設定しません。また、Chromeでは、すべてのページにヘッダーとフッターを書きません。ここで

は私のコードです：

pagination.php

<!DOCTYPE HTL> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex"> 
    <meta http-equiv="cache-control" content="no-cache">  
    <title>Brove.NET ISO Yazılımı</title> 
    <link rel="stylesheet" type="text/css" href="css/pagination.css" /> 
</head> 

<body> 
    <table class="header" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td>header 
     </td> 
     </tr> 
    </table> 

    <table class="content" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td valign="top"> 
     content 
     </td> 
     </tr> 
    </table> 

    <table class="footer" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td>footer 
     </td> 
     </tr> 
    </table> 

</body> 
</html>

pagination.css

@media screen{ 
    .header{ 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    .content{ 
     width:768px; 
     margin-top:10px; 
     margin-bottom:10px; 
     height:1000px; 
    } 

    .footer{ 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 
} 

@media print {  
    .header{ 
     position:fixed; 
     top:0; 
     left:0; 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    .content{ 
     width:768px; 
     margin-top:120px; 
     margin-bottom:120px; 
     height:1000px; 
    } 

    .footer{ 
     position:fixed; 
     left:0; 
     bottom:0; 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    @page{ 
     margin-bottom:150px; 
    } 
}

そして、これが第二のソリューションです：table-header-groupを使用して、このソリューションイムで

属性はtable-footer-groupです。それはFirefoxとIEで動作します。しかし、クロムはもう理解しません。印刷モードでは、すべてのページでヘッダーとフッターが繰り返されません。 Is there a way to get a web page header/footer printed on every page?

<style type="text/css"> 
    thead { display: table-header-group; } 
    tfoot { display: table-footer-group; } 
</style> 

<body> 
<table> 
    <thead><tr><td>Your header goes here</td></tr></thead> 
    <tfoot><tr><td>Your footer goes here</td></tr></tfoot> 
    <tbody> 
    <tr><td> 
    Page body in here -- as long as it needs to be 
    </td></tr> 
    </tbody> 
</table> 
</body>

このブラウザの問題を解決するために、またはあなたが私にどんな提案を持っていない任意のハックがあります：ここで

は別のコードですか？

出典

2012-01-18 FURKAN ILGIN

いいえ。あなたはPDFをコンパイルしてプリントマネージャに渡すか、デフォルトの動作をしています。 – MetalFrog

私もpdfを作成していますが、それは非常に遅いです。だから私はhtmlでこれをしたい –

''と ''を使っていたのは、Chromeではうまくいきませんでしたか？ –

テーブルタグではなくdivタグでページを作成してみてください！ divはテーブルよりも軽量です

<div id='header' style='height:230px'> 
</div> 

<div id='body'></div> 

<div id='footer' style='height:230px'> 
</div>

ありがとうございます！ EEN APIと、カスタムヘッダーやフッターなど多くのオプションを持っているこのウェブサイトの私の意見では

出典

2012-01-21 17:09:24 Chintan

私はポジションに相談していません！可能であれば絶対使用してください:) – Chintan

あなたdidnt私の質問を理解する。私は永遠のために印刷モードでそれをしたい –

は、印刷のために素晴らしい作品：私の場合は

http://pdfmyurl.com

速度が優れており、それは何も変更はありませんレイアウトで。

解決策2（多くの作業）：すべての要素に対して絶対配置を使用します。

出典

2014-07-20 05:44:54 tkon99

htmlページのカスタムヘッダーとフッター

答えて

関連する問題