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이 있으면 그 자손 중 어느 것도 표시하지 않기 때문에 디스플레이를 사용하는 것은 까다 롭습니다. 이를 사용하려면 페이지의 구조를 변경해야합니다.

가시성을 사용하면 자손에 대한 가시성을 켤 수 있기 때문에 더 잘 작동합니다. 보이지 않는 요소는 여전히 레이아웃에 영향을 미치므로 섹션 투 프린트를 맨 위 왼쪽으로 이동하여 제대로 인쇄합니다.