Frage Media Print Content läuft in Header über

[trix0]

Servus Zusammen,

ich habe ein Problem bei meinem CSS bzgl. Media Print.

  @media print {
      body {
       margin: 0;
        line-height: 1.2;

      }
      header{
        margin: 0;
        padding: 0;
        left: 0;
        right: 0;
        top: 0;
        position: fixed;
      }
      .content{
        margin-top: 120px;
        }

      br,
      p {
        margin: 0;
        line-height: 1.2;
      }

      .page-break {
        page-break-after: always;
      }

      table {
        page-break-inside: auto;
      }

      tr {
        page-break-inside: auto;
      }

      thead {
        display: table-header-group;
      }

      h3 {
        page-break-after: avoid;
      }

      .summary {
        page-break-inside: avoid;
      }

      .kein-umbruch {
        page-break-inside: avoid;
      }
    }

Mein problem ist, das mein Content in den Header von Seite 2 übergeht:


Wenn ich nun dem Header Background Color white zuweiße, erkennt man, das der Header über die komplette Breite geht:



Aber ich bekomme, egal was ich mache, es nicht hin, das er darunter angezeigt wird

 

[Sempervivum]

Das könnte man besser analysieren, wenn man die ganze Seite live vor sich hätte. Poste bitte die URL oder das komplette CSS und HTML.

Edit: Ich versuche mal zu raten: Du hast den Header fixed positioniert. Das hat den Nachteil, dass er die übrigen Inhalte überdeckt. Wahrscheinlich hast Du das korrigiert, z. B. mit einem margin-top aber das wirkt nur auf der ersten Seite.
Einfache Lösung: Benutze "position: sticky;", dann entfällt das Problem mit dem Überdecken, allerdings wird dann der Header nur auf der ersten Seite angezeigt. wenn Du ihn auf allen Seiten haben willst, müsste man weiter überlegen. Hier werden einige Tricks angegeben:

Set margin for every CSS page-break start

Pardon me for the title, I couldn't find a more accurate description for it. I'm breaking long rows in a table into several pages. Everything is ok with page-break-after for <tr>. My only pro...

stackoverflow.com

Auch die CSS-Eigenschaft "box-decoration-break" wird angegeben, was ein sauberer Weg wäre. Broserunterstützung ist gut.