Margin not working on the second page
Question
I have a site that shows rules of a company. It has multiple chapters, titlet, sub-titles and content whitin. I wanted to make a printable version of it, looks like this:
<!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>
This allows me to show the header on every page. The problem is, - because the content is like one big block - if I set a margin-top, on the first page it works, but on the second page the continuation of the text starts directly from the top, and the header overlaps it. I saw some other posts whith the same problem, but the answer was always that they should cut the content to pieces. For me thats not on option because the company has many rules, and the page only shows the given ones. Sorry for my english, hope you understand what my problem is
1 answers
solution1
0 2017-02-21 19:22:47
Try adding the margin to the page itself:
@page {
margin: 50px 0;
}
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.