내 페이지에 콘텐츠가 많지만 어디가 깨지는지 제어할 수 없습니다. 머리글/바닥글로 position:fixed를 사용하여 각 페이지에 내용을 넣었는데 텍스트가 겹칩니다. 다음 두 가지 방법으로 margin과 padding을 이용하여 겹치는 문제를 해결해 보았습니다.
@page를 사용하여 여백을 추가할 때
으아악말했듯이 모든 페이지에서 작동하지만 머리글과 바닥글도 여백에서 사라집니다.
그래서 body태그를 이용하여 여백을 추가해보았습니다
으아악첫 페이지에 위쪽 여백 2cm를 추가하고 마지막 페이지에 아래쪽 여백 2cm를 추가하면 작동합니다. 그러나 페이지 사이에는 그렇지 않습니다.
페이지별로 여백/패딩을 설정할 수 있나요?
P粉9967633142023-10-21 16:34:32
저는 똑같은 문제를 겪었고 많은 검색 끝에 결합된 솔루션을 제공하는 흥미로운 기사를 찾았습니다. 이 기사는 여기에서 읽을 수 있습니다.
간단히 말하면 두 가지 방법을 결합합니다:
位置：固定기술 사용
사용thead tbody tfoot
첫 번째 방법만 사용하는 경우 겹치는 문제에 직면하게 됩니다. 마찬가지로 두 번째 방법만 사용하는 경우 바닥글이 페이지 콘텐츠 하단에 멈춰 마지막 페이지의 시작 부분에 표시될 수 있지만 이러한 조합은 두 가지 방법으로 문제를 해결할 수 있습니다.
여기에서 작동하는 데모를 볼 수 있습니다.
이 솔루션이 제대로 작동하는지 확인하려면 Print Me! 버튼을 눌러 인쇄해 보세요.
바닥글에 페이지 번호를 추가해야 할 수도 있습니다. 이 작업도 CSS로 수행됩니다. 다음 CSS만 추가하면 됩니다.
으아악일부 기사에서는 이유 없이 内容: counter(page) " of " counter(pages);，但是在我的例子中，pages계속 0을 반환했기 때문에 무시했습니다. CSS var()를 사용하여 총 페이지 수를 계산하는 계산을 구현할 수도 있습니다.
참고로, 인쇄하기 전에 머리글과 바닥글을 보고 싶지 않다면 다음 CSS를 추가하세요.
으아악2020 업데이트:
페이지 번호가 더 이상 작동하지 않는 것 같습니다.