打印带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：none，那么它的后代都不会显示。要使用它，你必须改变你的页面结构。

使用可见性效果更好，因为您可以打开后代的可见性。尽管如此，不可见的元素仍然会影响布局，因此我将节打印移动到左上角，以便正确打印。