CSS로 인쇄할 때 추가 빈 페이지를 방지하는 방법은 무엇입니까?
- Linda Hamilton원래의
- 2024-10-29 23:38:29655검색
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 중국어 웹사이트의 기타 관련 기사를 참조하세요!
성명：
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.