HTML 打印底部的神秘空白
Posted
技术标签:
【中文标题】HTML 打印底部的神秘空白【英文标题】：Mysterious whitespace at bottom HTML Print 【发布时间】：2019-12-30 21:28:37 【问题描述】：我正在开发用于创建一些报告的应用程序。
App 允许用户从 A3、A4 和 letter 中选择页面尺寸。
我正在使用@media 查询进行打印。我在页面底部发现了神秘的空白。我想搭车。
这是我的片段。
索引.html
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>report</title>
<link rel="stylesheet" type="text/css" href="/js/bootstrap.min.css">
<script src="/js/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="/js/style.css">
<style>
@media print
@page
margin: 0 !important;
size: A3 portrait;
body
height: 100% !important;
margin: 0 !important;
padding: 0 !important;
.page
margin: 0 !important;
margin-bottom: 0 !important;
page-break-after: always !important;
</style>
</head>
<body>
<div class="report">
<div class="page cover A3 portrait">
<div>
<div class="coverpage">
<div class="artA">
<div class="logo"></div>
</div>
<div class="infoBox">
<div class="artB"></div>
<div class="elements">
<div class="title">
<span>Report Name</span>
</div>
<div class="createdBy">
<span>John Doe</span>
</div>
<div class="createdDate">
<span>26-08-19 22.16.55.348 IST</span>
</div>
<div class="dateRange">
<p>Date Range: <span>now-2y</span> <span>now</span>
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div>
<div class="page A3 potrait ">
<div class="pageHeader">
<div class="headerContent"><span>Page Header</span></div>
</div>
<div style="height: 100%;">
<div cdkdroplist="" class="col-md-12 layout gridster cdk-drop-list fit" id="cdk-drop-list-16"
style="padding: 10px 20px;">
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(0px, 0px, 0px); width: 536px; height: 490.667px;"
id="BarChart_0_0">
<div class="chartHeading" style="cursor:pointer;" id="BarChart_0_0_title"> BarChart_0_0
</div>
<div class="svg-container" id="BarChart_0_0_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(546px, 0px, 0px); width: 536px; height: 490.667px; margin-right: 20px;"
id="HorizontalBarChart_0_1">
<div class="chartHeading" style="cursor:pointer;" id="HorizontalBarChart_0_1_title">
HorizontalBarChart_0_1 </div>
<div class="svg-container" id="HorizontalBarChart_0_1_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(0px, 1001px, 0px); width: 536px; height: 490.667px; margin-bottom: 10px;"
id="PieChart_0_2">
<div class="chartHeading" style="cursor:pointer;" id="PieChart_0_2_title"> PieChart_0_2
</div>
<div class="svg-container" id="PieChart_0_2_cc"></div>
</div>
<div class=" cssTransform "
style="position: absolute; touch-action: none; overflow: hidden; display: block; transform: translate3d(546px, 501px, 0px); width: 536px; height: 490.667px; margin-right: 20px;"
id="RingChart_0_3">
<div class="chartHeading" style="cursor:pointer;" id="RingChart_0_3_title"> RingChart_0_3
</div>
<div class="svg-container" id="RingChart_0_3_cc"></div>
</div>
<div class=""
style="transform: translate3d(0px, 1001px, 0px); width: 536px; height: 490.667px; margin-bottom: 10px;">
</div>
</div>
</div>
<div class="pageFooter">
<div class="footerContent"><span></span> <span> Page Footer</span></div>
</div>
</div>
</div>
</div>
</body>
</html>
style.css
.A4
width: 210mm !important;
height: 297mm !important;
.A4.landscape
width: 297mm !important;
height: 210mm !important;
.A3
width: 297mm !important;
height: 420mm !important;
.A3.landscape
width: 420mm !important;
height: 297mm !important;
.letter
width: 216mm !important;
height: 279mm !important;
.letter.landscape
width: 279mm !important;
height: 216mm !important;
.bodyCanvas
height: 100%;
.page
margin:20px auto;
position: relative;
width:fit-content;
display:flex;
flex-direction: column;
box-shadow: 0 0 0.5cm rgba(0, 0, 0, 0.5);
.pageHeader
background: #324156;
margin-top: 0px !important;
height: 40px;
top: 0;
width: 100%;
.pageFooter
height:40px;
background: #324156;
bottom: 0;
.headerContent
padding:10px;
.footerContent
padding: 5px;
带有打印的页脚 div 后面的空格，如附图所示。
【问题讨论】：
【参考方案1】：您可以通过单击打开 DevTools 主菜单，选择更多工具 > 渲染，然后将其设置为“打印”来模拟打印模式。然后，您将能够使用常规元素检查器单击该填充（请参阅this answer 以获得视觉指南）。
[单独测试提供的 HTML+CSS，我没有得到演示的填充]
【讨论】：
嗨，填充显示在 PDF 或打印预览中。没有在带有打印仿真的 DevTool 中显示。以上是关于HTML 打印底部的神秘空白的主要内容，如果未能解决你的问题，请参考以下文章