CSS로 인쇄할 때 추가 빈 페이지를 방지하는 방법은 무엇입니까?-CSS 튜토리얼-php.cn

CSS로 인쇄할 때 추가 빈 페이지를 방지하는 방법은 무엇입니까?

Linda Hamilton

풀어 주다： 2024-10-29 23:38:29

원래의

571명이 탐색했습니다.

How to Avoid Extra Blank Pages When Printing with CSS?

CSS로 인쇄하는 동안 추가 공백 페이지 방지

CSS를 사용하여 웹 콘텐츠를 인쇄할 때 추가 공백 페이지가 발생하는 문제가 발생할 수 있습니다. 원하는 인쇄 영역 앞이나 뒤에 추가됩니다. 이 문제를 해결하려면 다음 CSS 미디어 쿼리를 고려하세요.

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

로그인 후 복사

설명:

이 CSS 미디어 쿼리는 html 및 body 요소의 height 속성을 다음과 같이 설정합니다. 문서 인쇄 중에는 99%입니다. 이렇게 하면 인쇄된 콘텐츠가 거의 전체 페이지를 채우므로 빈 페이지가 추가되는 것을 방지할 수 있습니다.

사용법:

이 솔루션을 사용하려면 위의 CSS를 추가하세요. 내부의 HTML 문서에 대한 미디어 쿼리 부분. 문서를 인쇄할 때만 스타일이 적용되도록 지정하려면 @media 인쇄 규칙을 포함해야 합니다.

예:

다음 HTML 코드는 사용법을 보여줍니다. CSS 미디어 쿼리:

<code class="html"><!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;
        }

        @media print {
            html, body {
                height: 99%;
            }
        }
    </style>
    <script type="text/javascript">
        window.print();
    </script>
</head>
<body>
    <div class="print">fd</div>
    <div class="print">fdfd</div>
</body>
</html></code>

로그인 후 복사

이 솔루션을 적용하면 CSS 페이지 나누기 속성을 사용하는 동안 추가 빈 페이지가 인쇄되는 것을 방지할 수 있습니다.

위 내용은 CSS로 인쇄할 때 추가 빈 페이지를 방지하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!