html 페이지의 사용자 정의 머리말과 꼬리말

인쇄 모드에서 모든 페이지에 머리말과 꼬리말을 넣고 싶습니다. 나는 그것에 대해 많은 연구를 해왔다.html 페이지의 사용자 정의 머리말과 꼬리말

두 가지 해결책을 찾았습니다. 하지만 그들은 크로스 브라우저가 아닙니다. (IE, Firefox 및 Chrome에서 작동하고 싶습니다)

첫 번째 해결 방법 : 상단과 하단의 여백을 컨텐츠 테이블로 설정합니다. 그런 다음 고정 된 위치로이 공간에 머리말과 꼬리말을 씁니다. 그것은 Firefox에서 완벽하게 작동합니다. 그러나 IE와 Chrome에서는 여백을 설정하지 않습니다. 또한 크롬에서는 모든 페이지에 머리말과 꼬리말을 작성하지 않습니다. 여기

내 코드입니다 :

pagination.php

<!DOCTYPE HTL> 
<html> 
<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-9"> 
    <meta name="robots" content="noindex, nofollow"> 
    <meta name="googlebot" content="noindex"> 
    <meta http-equiv="cache-control" content="no-cache">  
    <title>Brove.NET ISO Yazılımı</title> 
    <link rel="stylesheet" type="text/css" href="css/pagination.css" /> 
</head> 

<body> 
    <table class="header" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td>header 
     </td> 
     </tr> 
    </table> 

    <table class="content" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td valign="top"> 
     content 
     </td> 
     </tr> 
    </table> 

    <table class="footer" cellpadding="0" cellspacing="0"> 
     <tr> 
     <td>footer 
     </td> 
     </tr> 
    </table> 

</body> 
</html>

pagination.css

@media screen{ 
    .header{ 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    .content{ 
     width:768px; 
     margin-top:10px; 
     margin-bottom:10px; 
     height:1000px; 
    } 

    .footer{ 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 
} 

@media print {  
    .header{ 
     position:fixed; 
     top:0; 
     left:0; 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    .content{ 
     width:768px; 
     margin-top:120px; 
     margin-bottom:120px; 
     height:1000px; 
    } 

    .footer{ 
     position:fixed; 
     left:0; 
     bottom:0; 
     width:768px; 
     height:100px; 
     border:2px solid #000; 
    } 

    @page{ 
     margin-bottom:150px; 
    } 
}

그리고이 두 번째 솔루션입니다 : table-header-group를 사용하여이 솔루션 메신저에서

및 table-footer-group 속성 그것은 파이어 폭스와 IE를 작동합니다. 그러나 크롬은 다시는 이해하지 못합니다. 그것은 인쇄 모드의 모든 페이지에서 머리말과 꼬리말을 반복하지 않습니다. Is there a way to get a web page header/footer printed on every page?

<style type="text/css"> 
    thead { display: table-header-group; } 
    tfoot { display: table-footer-group; } 
</style> 

<body> 
<table> 
    <thead><tr><td>Your header goes here</td></tr></thead> 
    <tfoot><tr><td>Your footer goes here</td></tr></tfoot> 
    <tbody> 
    <tr><td> 
    Page body in here -- as long as it needs to be 
    </td></tr> 
    </tbody> 
</table> 
</body>

이 브라우저 문제를 해결하거나 당신이 나에게 어떤 제안을 않는 해킹이 있습니까 : 여기

다른 코드?

출처

2012-01-18 FURKAN ILGIN

아니요. PDF를 컴파일하여 인쇄 관리자에게 전달하거나 기본 동작으로 살 수 있습니다. – MetalFrog

나는 또한 pdf를 창조하고있다 그러나 아주 느리다. 그래서 나는 html로 이것을하고 싶다 –

''와''을 사용하는 것이 Chrome에서 작동하지 않습니까? –

테이블 태그가 아닌 div 태그로 페이지를 만드십시오! div는 테이블보다 가볍습니다.

<div id='header' style='height:230px'> 
</div> 

<div id='body'></div> 

<div id='footer' style='height:230px'> 
</div>

감사합니다! EEN API와 같은 사용자 정의 머리글과 바닥 글 등 많은 옵션을 가지고이 웹 사이트 내 의견에

출처

2012-01-21 17:09:24 Chintan

나는 포지션과상의하지 않고 있습니다! 가능한 한 절대적으로 사용하려고 시도하십시오 :) – Chintan

당신은하지 못했습니다. 내 질문을 이해하십시오. 나는 영원한을위한 인쇄 모드에서 그것을하고 싶다. –

인쇄 위대한 작품 : 내 경우

http://pdfmyurl.com

속도가 우수하고는 아무것도 변경되지 않습니다 레이아웃에서.

해결 방법 2 (많은 작업) : 모든 요소에서 절대 위치 지정을 사용하십시오.

출처

2014-07-20 05:44:54 tkon99

html 페이지의 사용자 정의 머리말과 꼬리말

답변

관련 문제