即使使用css media ='print“,页面顶部的空白部分

时间:2018-08-03 11:11:26

标签: html css printing css-print

当我定义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>

1 个答案:

答案 0 :(得分:0)

解决方案是不使用“可见性:隐藏”,因为这只会隐藏内容,而不是将其从预览中删除。因此,在要忽略的内容上使用display:none。