인쇄하는 동안 모든 페이지의 상단과 하단에 로고와 제목을 추가해야합니다.HTML로 인쇄하는 동안 각 페이지의 동적 내용에 고정 머리글과 바닥 글을 추가하려면 어떻게합니까?
페이지의 내용은 동적이며 span/div는 여러 페이지로 확장 될 수 있습니다. 내용이 단일 div 또는 span에 있으므로 페이지 나누기 위치를 결정할 수 없습니다.
머리글과 바닥 글 div 및 태그를 추가하려고했습니다. 그러나 머리글과 바닥 글은 첫 페이지의 처음과 마지막 페이지의 끝에 각각 한 번만 표시됩니다. 모든 페이지에 인쇄 할 수있는 방법이 있습니까?
HTML
<div class="header">HEADER GOES HERE</div>
<div class="content">content content content</div>
<div class="footer">FOOTER GOES HERE</div>
CSS
@media print{
.header{
position: fixed;
top: 0;
}
.footer{
position: fixed;
bottom: 0;
}
}
@media screen{
.header{
display:none;
}
.footer{
display:none;
}
}
주 div의 내용이 두 개 이상의 페이지 (예 : 큰 단락)로 확장되는 경우 작동하지 않습니다. 이 경우 바닥 글은 마지막 페이지에만 표시되고 머리글은 첫 페이지에만 표시되고 그 사이의 페이지에는 표시되지 않습니다. 페이지 수에 관계없이 모든 페이지마다 머리글과 바닥 글이 필요합니다. – Rashid
이 첫 번째 선택기에 대해 화면에서 인쇄 오타를 수정했습니다. 인쇄 미리보기의 모든 페이지에 표시됩니다. – derp
페이지 끝까지 아래로 스크롤 한 다음 인쇄하려고하면 인쇄 미리보기에서 머리글과 바닥 글의 위치가 이동됩니다. – Rashid
이 position: fixed;를 사용해보십시오 불구하고 머리글과 바닥 글이 콘텐츠를 중복되지 않도록 당신은 여백 함께 놀러해야합니다 그것을 위해 일해야합니다.
div에 헤더를 만들어 위치를 고정시킬 수 있습니다. 또한 레이아웃도 동일해야합니다. 헤더를 고정 된 것으로 설정하려면 몇 가지 CSS 요소를 설정해야합니다. –
이것은 중복 질문입니다. http://stackoverflow.com/questions/1360869/how-to-use-html-to-print-header-and-footer-on-every-printed-page-of-a-document -w? rq = 1 –