Tworzenie nagłówków i stopek stron przy użyciu CSS do drukowania

Tworzę plik PDF używając latającego spodka (który wyrzuca CSS / HTML do iText do pliku PDF) i próbuję użyć CSS3, aby zastosować nagłówek obrazu i stopkę do każdej strony.

W zasadzie chciałbym umieścić ten div w lewym górnym rogu każdej strony: 

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

Mój CSS wygląda mniej więcej tak: 

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

    @top-left {
        content: "Hello";
    }
}
Czy jest jakiś sposób na umieszczenie tego div w content?
Author: venimus, 2012-03-15
Source

3 answers

Umieszczanie elementu na górze każdej strony: 

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

Zobacz http://www.w3.org/TR/css3-gcpm/#running-elements (działa w latającym spodku)

 43
Author: Adam,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2012-03-16 18:02:06

Aby umieścić zarówno nagłówek, jak i stopkę na stronach (opracowując doskonałą odpowiedź od @ 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>

uwaga: aby stopka powtarzała się na każdej stronie, może być konieczne zdefiniowanie jej przed inne treści (dla zawartości wielostronicowej)

 10
Author: zeffren,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-11-29 22:08:39

Spędziłem dużo czasu, aby to uruchomić na nowoczesnych Chrome, Firefox i Safari. Używam tego do tworzenia PDF z HTML. Nagłówek i stopka zostaną przymocowane do każdej strony bez nakładania się na zawartość strony. Spróbuj:

CSS 

<style>
  @page {
    margin: 10mm;
  }

  body {
    font: 9pt sans-serif;
    line-height: 1.3;

    /* Avoid fixed header and footer to overlap page content */
    margin-top: 100px;
    margin-bottom: 50px;
  }

  #header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 100px;
    /* For testing */
    background: yellow; 
    opacity: 0.5;
  }

  #footer {
    position: fixed;
    bottom: 0;
    width: 100%;
    height: 50px;
    font-size: 6pt;
    color: #777;
    /* For testing */
    background: red; 
    opacity: 0.5;
  }

  /* Print progressive page numbers */
  .page-number:before {
    /* counter-increment: page; */
    content: "Page: " counter(page);
  }

</style>

HTML 

<body>

  <header id="header">Header</header>

  <footer id="footer">footer</footer>

  <div id="content">
    Here your long long content...
    <p style="page-break-inside: avoid;">This text will not be broken between the pages</p>
  </div>

</body>
 0
Author: Fred K,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2020-01-30 17:27:39