인쇄되는 각 페이지에 대해 여백/패딩(HTML/CSS)을 설정하는 방법은 무엇입니까?

Question

내 페이지에 많은 콘텐츠가 있지만 콘텐츠가 중단되는 위치를 제어할 수 없습니다. 머리글/바닥글로 position:fixed를 사용하여 각 페이지에 일부 내용을 넣었는데 텍스트가 겹칩니다. 다음 두 가지 방법으로 margin과 padding을 이용하여 겹치는 문제를 해결해 보았습니다. @page{margin:2cm;}을 사용하여 여백을 추가하면 모든 페이지에서 작동하지만 머리글과 바닥글도 여백에서 사라집니다. 그래서 body 태그 body{margin:2cm;/*paddi를 사용하여 여백을 추가하려고 했습니다.

P粉996763314 · Answer

저는 똑같은 문제를 겪었고 많은 검색 끝에 결합된 솔루션을 제공하는 흥미로운 기사를 찾았습니다. 이 기사는 여기에서 읽을 수 있습니다.

간단히 말하면 두 가지 방법을 결합합니다:

位置：固定기술 사용
사용thead tbody tfoot

첫 번째 방법만 사용하는 경우 겹치는 문제에 직면하게 됩니다. 마찬가지로 두 번째 방법만 사용하는 경우 바닥글이 페이지 콘텐츠 하단에 멈춰 마지막 페이지의 시작 부분에 표시될 수 있지만 이러한 조합은 두 가지 방법으로 문제를 해결할 수 있습니다.

으아악 으아악

여기에서 작동하는 데모를 볼 수 있습니다.

이 솔루션이 제대로 작동하는지 확인하려면 Print Me! 버튼을 눌러 인쇄해 보세요.

바닥글에 페이지 번호를 추가해야 할 수도 있습니다. 이 작업도 CSS로 수행됩니다. 다음 CSS만 추가하면 됩니다.

으아악

일부 기사에서는 이유 없이 内容: counter(page) " of " counter(pages);，但是在我的例子中，pages계속 0을 반환했기 때문에 무시했습니다. CSS var()를 사용하여 총 페이지 수를 계산하는 계산을 구현할 수도 있습니다.

참고로, 인쇄하기 전에 머리글과 바닥글을 보고 싶지 않다면 다음 CSS를 추가하세요.

으아악

2020 업데이트:

페이지 번호가 더 이상 작동하지 않는 것 같습니다.