logo标签列表

第二页无法正常显示页面边距

htmlcssprintingmargin
3

我有一个网站，展示了公司的规章制度。它有多个章节、标题、子标题和内容。我想要制作一个可打印的版本，效果如下：

<!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>

这使我能在每一页上显示标题。问题是，因为内容像一个大块，如果我在第一页设置一个 margin-top，在第二页上文本的续接就直接从顶部开始了，并且标题重叠了它。我看到了一些其他帖子也有同样的问题，但答案总是要把内容分成几个部分。对于我来说这不是一个选项，因为公司有许多规定，而页面只显示给定的内容。抱歉我的英语不好，希望你能理解我的问题。
1个回答
0
尝试将边距添加到页面本身：
@page {
    margin: 50px 0;
}
仅适用于第一页。 - zoldingo
清除所有缓存？也许它已经被缓存了。 - Chris Happy
是的。我用上面写的相同代码进行测试，使用lipsum来模拟内容。 - zoldingo
不适用于我。 - hoogw
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接