使用 JS 和 @media 打印 CSS 打印但内容被下推答案

【问题标题】：Printing using JS and @media print CSS but content pushed down使用 JS 和 @media 打印 CSS 打印但内容被下推
【发布时间】：2022-02-08 07:03:44
【问题描述】：

我在打印预览窗口中的内容显示了大约 5 或 6 行。

由于我已经处理了高度、边距和内边距，我不确定是什么让它下降了。我无法检查检查，因为它在打印预览窗口内。我只是在尝试一些东西，所以不要着急。如果我弄清楚了，我会发布答案。

JS - 从 onclick() 调用；

function print1() {
    window.print();
}

CSS

    @media print{
    body *:not(#OFP_here){
        visibility: hidden;
        height:0px;
        margin: 0px; 
        padding: 0px;            
    }

更新：3 行是由于 JS 构建的表格，即使我已经在 @media 中占了表格。

【问题讨论】：

标签： css media-queries

【解决方案1】：

visibility: hidden; 将“隐藏”这些元素，因为它们的内容被隐藏了。但是没有这个规则他们占据的空间仍然会显示为空白空间，我想这就是你所指的。

改用display: none，这实际上会隐藏受影响的元素，不会留下任何空白。

【讨论】：

宾果游戏！谢谢，我今天学到了一些东西。

【解决方案2】：

您需要以@page 为目标，这将修改全局页面设置。你可以在MDN阅读更多关于它的信息

@页面

@page CSS at-rule 用于在打印文档时修改某些 CSS 属性。

语法
@page {
  margin: 1cm;
}

【讨论】：