2016-08-25 1 views
3

Ich habe Mühe, die Kopf- und Fußzeile auf jeder Druckseite zu wiederholen. Kein Problem, muss ein Tisch sein, so wie es war, hat jemand eine Idee wie es geht? Und ich weiß nicht, wie viele Seiten es sein wird, kann n Seiten sein.Wie man die Kopf- und Fußzeile macht, ohne für N Seiten im Druck zu wiederholen?

enter image description here

TRY: jsfiddle.net/7ZGVv/111

+0

können Sie einen Code schreiben? –

+0

Ich fand keinen Code, um dies zu tun, je näher ich sah, war dies: http://jsfiddle.net/7ZGVv/111/. Aber kann nicht die Kopfzeile noch Fußzeile wiederholen. – Danilo

+0

Mögliches Duplikat von [Verwendung von HTML zum Drucken von Kopf- und Fußzeilen auf jeder gedruckten Seite eines Dokuments mit 5 Seiten?] (Http://stackoverflow.com/questions/1360869/how-to-use-html-to-print - Kopf-und-Fuß-auf-jeder-gedruckten-Seite-eines-Dokuments-w) –

Antwort

2

Nun, da niemand zu denken, scheint es ein dup ist, werde ich den Code hier posten, es zu beweisen. Sehen Sie ein funktionierendes Beispiel hier http://a-b-smith.com/

html

<h1>test 1</h1> 
<h1>test 2</h1> 
<h1>test 3</h1> 
<h1>test 4</h1> 
<h1>test 5</h1> 
<h1>test 6</h1> 
<div class="divFooter"> 
<h1>Footer</h1> 
</div> 
<div class="divHeader"> 
<h1>Header</h1> 
</div> 

CSS note ich einen Seitenumbruch zwischen jedem der <h1> hinzugefügt mehrere Seiten zu simulieren

@media print { 
    h1 { 
    page-break-after: always; 
    } 
    div.divFooter { 
    position: fixed; 
    bottom: 0; 
    } 
    div.divHeader { 
    position: fixed; 
    top: 0; 
    } 
    body > h1 {margin-top: 100px;} 
} 

@media screen { 
    div.divFooter, div.divHeader { 
    display: none; 
    } 
} 
+1

Funktioniert perfekt, danke. – Danilo

Verwandte Themen