@media print ， div 和 header 重叠答案

【问题标题】：@media print , div and header overlap@media print ， div 和 header 重叠
【发布时间】：2022-07-22 19:57:36
【问题描述】：

我只想为每个页面添加标题。所以我使用@media 打印。这是我的代码

@media screen {
    div#parent {
        display:none;
    }
}
@media print {
    div#parent {
        position:fixed;
        display:block;
        top:0;
    }
}

问题是标题与每个页面重叠

【问题讨论】：

标签： html css media-queries

【解决方案1】：

您需要在内容和标题之间添加一个空格。我不知道你的 html 结构，但如果你有这样的东西：

HTML

<html>

<body>
    <div class="head">
        <!-- Your header here -->
    </div>

    <div class="content">
        <!-- Your page content here -->
    </div>
    
</body>

</html>

你需要在 .content 类中添加一些 margin-top 或 padding-top，它应该可以正常工作：

CSS

.content {
    margin-top: 100px;
}

【讨论】：

感谢您的回答。但这样做只会在第一页添加页眉。因为很多页面只共享一个 div。
你的问题是什么？
我的问题是给每个页面设置一个标题。现在只有第一页生效

【解决方案2】：

你需要使用php给我们的include方法。

假设你有以下结构：

app|
   | header.html
   | index.php

在您的标头中，您将拥有您现在正在使用的标头，并且在 index.php 中，您将不得不调用该文件。你可以使用<?php include "header.html"; ?>

您的 index.php 应该如下所示：

<body>

    <?php include "header.html"; ?>

    <div class="content">
        <!-- Page Content Here -->
    </div>

</body>

【讨论】：