打印帶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，那麼它的後代都不會顯示。要使用它，你必須改變你的頁面結構。

使用可見性效果更好，因爲您可以打開後代的可見性。儘管如此，不可見的元素仍然會影響佈局，因此我將節打印移動到左上角，以便正確打印。