web-dev-qa-db-ja.com

印刷用のCSSを使用してページのヘッダーとフッターを作成する

フライングソーサー(CSS/HTMLをiTextからPDFにダンプ)を使用してPDF)を作成しています。CSS3を使用して各ページに画像ヘッダーとフッターを適用しようとしています。

基本的に、このdivを各ページの左上に配置します。

<div id="pageHeader">
    <img src="..." width="250" height="25"/>
</div>

私のCSSは次のようになります。

@page {
    size: 8.5in 11in;
    margin: 0.5in;

    @top-left {
        content: "Hello";
    }
}

このdivをcontentに入れる方法はありますか?

44
Naftuli Kay

各ページの上部に要素を置く:

@page {
  @top-center {
    content: element(pageHeader);
  }
}
#pageHeader{
  position: running(pageHeader);
}

http://www.w3.org/TR/css3-gcpm/#running-elements (Flying Saucerで動作)を参照してください

40
Adam

ページにbothヘッダーとフッターを含めるには(@Adamからの優れた回答を詳しく説明します):

<style>
@page {

    margin: 100px 25px;
    size: letter portrait;

    @top-left {
        content: element(pageHeader);
    }

    @bottom-left {
        content: element(pageFooter);
    }
}

#pageHeader{
    position: running(pageHeader);
}

#pageFooter{
    position: running(pageFooter);
}

</style>
<body>
    <header id="pageHeader">something from above</header>
    <footer id="pageFooter">lurking below</footer>

    <div>meaningful rambling...</div>
</body>

注:フッターをすべてのページで繰り返すには、フッターを定義する必要がある場合があります[〜#〜] before [〜#〜]他の本文コンテンツ(for複数ページのコンテンツ)

8
zeffren