Question

是否可以使用css在html文档的所有页面中打印页眉和页脚，而不会重叠标题和内容。我试过了＃34; position：fixed＆＃34;但随之而来的是标题与正文内容重叠。当我试图设置＆＃34; top：margin＆＃34;到内容的主体，它只适用于第一页。

代码示例

<html>
      <head>                 
      <style>
     div#myheader {
   position: fixed; top: 0; left: 0; width: 100%; height: 2em;
   padding-bottom: 3em;
   margin-bottom: 10px;
   }


@media screen {
 div#myheader {
   display: none !important;
    }
   div#mainContent {
    margin-top: 0;
     }
  }

@media print {
    div#myheader {
 display: block;
   }
    div#mainContent {
   margin-top: 0em;

    }
  }
 </style> 
 </head>
 <body>
 <div id="myheader" class="header" style="display: block;">
  Header
 </div>
 <div id="mainContent">
 // Have more than 150 lines here
 </div>
 </body>
 </html>

注意：请不要将问题标记为重复。我在Stack Overflow和其他博客中看到了类似的问题。但没有任何帮助我。近一个月来，我对此感到震惊。请评论您的解决方案。

Answer 1

我想我明白你在说什么，你希望你的标题是每个打印的页面，但当你使用position：fixed时，它目前与内容重叠？

如果是这样，这是因为position：fixes属性从文档流中删除了一个元素，您的主要内容仍然在文档流中，但不会移动到固定标题的方式，但它不在推送流中它。标题上的保证金底部无效。

你的标题会有一个粗糙的高度吗？

您可以简单地使用固定位置，但通过边距向下推送您的主要内容，以模拟标题实际上是文档流的一部分，如下所示：

 @media print {
 div#myheader {
     display: block;
 }
 div#mainContent {
   margin-top: 200px;
 }
}

在这里，您可以按照标题的大小推送您的内容。如果标题具有动态高度，则可以使用某些JS执行此操作。

在html文档的所有页面中打印标题而不重叠

1 个答案: