css - 尽管将整个 body 设置为可见性 :hidden - what's wrong?，div 仍然出现

Question

这是配置:

@media print {
  body {
    visibility: hidden;
  }
  #printhtml {
    visibility: visible;
    left: 0;
    top: 0;
  }
}

我页面上的其他 div，除了 printhtml 之外，在打印整个页面时都会出现。我尝试将这些 div 设置为 display:none 并且成功了。但是它们曾经占据的空间(现在是空白)继续存在，打印输出始终有 3 个空白页。

我在这里错过了什么？

顺便说一句，下面是页面的其他部分，其中包含脚本和 HTML 代码。 div stubborn1、stubborn2 和 stubborn3 继续出现。同样，当我将它们设置为 display:none 时它们会消失，但在打印时会被空格替换，这不应该是这种情况。

<script>
function myFunction() {
    window.print();
}
</script>

<div style="width:78%; float:left;">
<div id="printhtml">
I want to print this page
</div>
&nbsp;
<hr>
<a title="View Page in PDF" href="/pdf-URL"><img src="/image1.png" /></a>&nbsp;<a href="" title="Print Page" onclick="myFunction()"><img src="/print.png" /></a>
</div>
<div id="stubborn1" style="width:20%; float:right;"><img src="/image2.jpg" style="position:fixed; margin-top:-70px; z-index:21;" />
</div>
<div id="stubborn2" ><img src="/image3.png" style="position:fixed; margin:215px 0px 0px 20px; z-index:21;" /></div>
<div id="stubborn3" ><img src="/image4.png" style="position:fixed; margin:215px 0px 0px 122px; z-index:21;" />
</div>

Answer 1

不要隐藏整个 body

在div 标签中给出body 内容并给出类'hide'

并使用这个

@media print {
              .hide {
                display:none;
            }
      #printhtml {
        visibility: visible;
        left: 0;
        top: 0;
      }
    }