用CSS打印DIV

Question

如何使用CSS打印DIV？

我使用此代码

@media print {
  body * {
    visibility: hidden;
  }
  .drop * {
    visibility: visible;
  }
  .drop{
    position: absolute;
    left: 0;
    top: 0;
  }
}

它起作用，但是，它会打印很多页面空白。如果我使用Display:none和Display:block，则会打印一页空白。

Answer 1

@media print {
  body * {
    visibility: hidden;
  }
  #section-to-print, #section-to-print * {
    visibility: visible;
  }
  #section-to-print {
    position: absolute;
    left: 0;
    top: 0;
  }
}

替代方法并不是那么好。使用display很棘手，因为如果任何元素有display：none，那么它的后代都不会显示。要使用它，您必须更改页面的结构。

使用可见性效果更好，因为您可以打开后代的可见性。不可见的元素仍会影响布局，所以我将部分打印到左上方，以便正确打印。