2017-02-21 3 views
2

Ich habe eine Website, die Regeln eines Unternehmens zeigt. Es hat mehrere Kapitel, Titlet, Untertitel und Inhalt weiß. Ich wollte eine druckbare Version davon machen, sieht so aus:Marge funktioniert nicht auf der zweiten Seite

<!DOCTYPE HTML> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> 
<title>Test</title> 
<style type="text/css"> 
    @media screen { 
    header.onlyprint, footer.onlyprint{ 
     display: none; /* Hide from screen */ 
    }`enter code here` 
} 

@media print { 
    header.onlyprint { 
     position: fixed; /* Display only on print page (each) */ 
     top: 0; /* Because it's header */ 
    } 
    footer.onlyprint { 
     position: fixed; 
     bottom: 0; /* Because it's footer */ 
    } 
} 
</style> 
</head> 
<body> 
<header class="onlyprint">header</header> 
<!--long text--> 
<footer class="onlyprint">footer</footer> 
</body> 
</html> 

Dies ermöglicht mir, den Header auf jeder Seite anzuzeigen. Das Problem ist, - weil der Inhalt wie ein großer Block ist - wenn ich einen Rand anlege, auf der ersten Seite funktioniert es, aber auf der zweiten Seite beginnt die Fortsetzung des Textes direkt von oben und die Kopfzeile überlappt sie . Ich sah einige andere Beiträge mit dem gleichen Problem, aber die Antwort war immer, dass sie den Inhalt in Stücke schneiden sollten. Für mich ist das nicht möglich, da das Unternehmen viele Regeln hat und die Seite nur die angegebenen anzeigt. Sorry für mein Englisch, hoffen, dass Sie verstehen, was mein Problem ist

Antwort

0

Versuchen Hinzufügen der Marge auf der Seite selbst:

@page { 
    margin: 50px 0; 
} 
+0

funktioniert nur auf der ersten Seite. – zoldingo

+0

Alle Caches leeren? Vielleicht ist es zwischengespeichert. –

+0

Ja. Ich habe den gleichen Code wie oben zum Testen verwendet, benutze lipsum um den Inhalt zu simulieren. – zoldingo

Verwandte Themen