unsichtbare Kopfzeile auf der Druckseite

Mir ist aufgefallen, dass Chrome den Text nicht mehr als Kopfzeile der Druckseite akzeptiert.unsichtbare Kopfzeile auf der Druckseite

Jetzt verwende ich die Position behoben, aber das hat eine "Inhaltsgröße" von Null. Um das zu umgehen, habe ich einen Wrapper mit fester Größe erstellt. Aber das funktioniert nur auf der ersten Seite. Auf der zweiten Seite gibt es keinen Wrapper und deshalb befindet sich der Header über dem Text.

Gibt es eine Möglichkeit, die Position festzulegen, dass es den Inhalt nach unten drücken soll?

<style> 
    #headerWrapper { 
     display: block; 
     height: 50px; 
    } 

    @media print { 
     #header { 
      position:fixed; 
      top:0px; 
      left:0px; 
      width:100%; 
      color:#CCC; 
      background:#333; 
      padding:8px; 
      margin-left: 100px; 
     } 
    } 
</style> 

<body> 
    <div id="headerWrapper"> 
     <div id="header">HEADER</div> 
    </div> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
    <p>Content placeholder ...</p> 
</body>

Quelle

2017-06-29 Mr.Tr33

Bitte teilen Sie Ihre Codes. –

jetzt gibt es ein Beispiel :) –

1. Seite 2. Seite im Sinne Scrollen nach oben und unten? –

Hoffnung diese Lösung für Sie funktioniert gut:

<!DOCTYPE html> 
 
<html> 
 
<head> 
 
<title>Page Title</title> 
 
</head> 
 
<style> 
 
    
 
header { 
 
    font-size: 20px; 
 
} 
 

 
@media print { 
 
    html, body { 
 
    width: 210mm; 
 
    height: 297mm; 
 
    } 
 
    header { 
 
    position: fixed; 
 
    top: 0; 
 
    padding-bottom:5mm; 
 
    } 
 

 
    p { 
 
\t padding:5mm; 
 
    } 
 
} 
 
    
 
</style> 
 

 
<body> 
 
    <header>Header </header> \t 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
    <p>Content placeholder ...</p> 
 
\t 
 
</body> 
 
</html>

Quelle

2017-06-29 12:13:58

nein ist, führen Sie den Code, öffnen Sie die Druckervorschau und scrollen Sie nach unten zur zweiten Seite –

Posted die aktualisierte Lösung, lassen Sie mich wissen, ob das Problem noch besteht. –

funktioniert nicht, die Auffüllung von der ersten und zweiten Seite des Inhalts ist nicht gleich –

unsichtbare Kopfzeile auf der Druckseite

Antwort

Verwandte Themen