CSS 控制打印范围出现空白区域

Question

利用 CSS 控制了打印区域的效果，代码如下：

@media print {
  body * {
    visibility: hidden;
    font-size: 10px;
  }

  .print-show,
  .print-show * {
    visibility: visible;
  }

  .print-show {
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
  }

  .ant-modal {
    top: 0 !important;
  }
}

print-show 是我要打印的范围，现在通过 Chrome 的调试工具查看打印范围是已经置顶状态了，但是按下 cmd+p 打印后，却出现了一大块空白区域，请问这种情况要如何处理？

Answer 1

问题应该出现在这里，

body * {
    visibility: hidden;
    font-size: 10px;
  }

visibility: hidden只是隐藏了元素，但是元素所占用的空间仍然存在。
如果打印的时候只打印print-show，针对其他元素应该使用display：none， 让其他元素彻底从dom中消失。