[css] 인쇄하는 동안 끝에 추가 빈 페이지를 피하는 방법은 무엇입니까?

Program / 글쓴이

CSS 속성을 사용하고 있습니다.

page-break-after: always;=> 사용하면 이전에 추가 빈 페이지를 인쇄합니다.

page-break-before: always;=>를 사용하면 나중에 빈 페이지가 추가로 인쇄됩니다. 이것을 피하는 방법?

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
    page-break-after: always;

}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>

답변

추가 할 수 있습니다.

.print:last-child {
     page-break-after: auto;
}

따라서 마지막 print요소는 추가 페이지 나누기를 얻지 않습니다.

: last-child 선택기는 브라우저를 대상으로하는 경우 IE8에서 지원되지 않습니다.

답변

이거 해봤 어?

@media print {
    html, body {
        height: 99%;
    }
}

답변

여기에 설명 된 솔루션이 도움이되었습니다 ( webarchive 링크 ).

우선 모든 요소에 테두리를 추가하여 새 페이지가 추가되는 원인을 확인할 수 있습니다 (여백, 패딩 등).

div { border: 1px solid black;}

해결책 자체는 다음 스타일을 추가하는 것이 었습니다.

html, body { height: auto; }

답변

그 어느 것도 작동하지 않으면 이것을 시도하십시오

@media print {

    html, body {
      height:100vh;
      margin: 0 !important;
      padding: 0 !important;
      overflow: hidden;
    }

}

100vh인지 확인하십시오

답변

이것은 나를 위해 작동합니다 

.print+.print {
    page-break-before: always;
}

답변

CSS를 사용하고 페이지 나누기를 피하려면 다음을 사용하십시오. 

.print{
    page-break-after: avoid;

}

페이징 된 미디어 살펴보기

pageBreakBefore 및 pageBreakAfter에 해당하는 스크립트를 사용하여 해당 값을 동적으로 할당 할 수 있습니다. 예를 들어 방문자에게 사용자 지정 페이지 나누기를 강제하는 대신 스크립트를 만들어 선택 사항으로 만들 수 있습니다. 여기에서는 머리글 (h2)과 프린터 자체 재량 (기본값)에서 페이지 분할 사이를 전환하는 확인란을 만듭니다.

<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>

<script type="text/javascript">
 function breakeveryheader(){
 var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
 for (i=0; i<document.getElementsByTagName("H2").length; i++)
 document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
 }

이것을 사용하는 예를 보려면 여기 를 클릭 하십시오 . 스크립트 내의 H2를 P 또는 DIV와 같은 다른 태그로 대체 할 수 있습니다.

http://www.javascriptkit.com/dhtmltutors/pagebreak.shtml

답변

(지금은) 이유를 모르지만 이것이 도움이되었습니다.

   @media print {
        html, body {
            border: 1px solid white;
            height: 99%;
            page-break-after: avoid;
            page-break-before: avoid;
        }
    }

누군가가 문제와 싸우면서 머리카락을 구할 수 있기를 바랍니다 …;)