页面顶部的空白部分，即使使用 css media='print"答案

【问题标题】：Blank section at the top of page even with css media='print"页面顶部的空白部分，即使使用 css media='print"
【发布时间】：2019-01-11 06:29:15
【问题描述】：

当我定义我的 CSS @media 打印规则（见下文）时，我在打印预览中看到页面顶部有一个空白部分（见图片 a blank section at top of page in print preview）。我尝试设置边距以提升页面，但它会使内容倾斜。想法？？

<style media="print">

body, body * {
    visibility: hidden;
    height: auto;
}

@@page {
    size: letter;
    margin:0;
    padding:0;
}


#card-body, #card-body * {
    visibility: visible;
}


</style>

<div id="card-body" class="border-grey-100 ">
        <div class="row ">
            <div class="col-lg-12">
                <h2 class="text-center">MEMORANDUM</h2>
                <h6 class="text-right" style="font-weight:bolder">REF NO. DHBC <span id="refNo"></span></h6>
                <table id="tbl_weeklyCollectionsData" style="border:0">
                </table>
            </div>
         </div>
</div>

【问题讨论】：

标签： html css printing css-print

【解决方案1】：

解决方案是不使用可见性：隐藏，因为它只是隐藏内容而不是将其从预览中删除。因此，在您希望省略的内容上使用 display:none。

【讨论】：