Пустой раздел в верхней части страницы, даже если css media='print'

Question

Когда я определяю свое правило печати CSS @media (см. Ниже), я вижу пустой раздел вверху моей страницы в режиме предварительного просмотра (см. Изображение пустого раздела вверху страницы в режиме предварительного просмотра). Я попытался установить поле, чтобы поднять страницу, и это искажает содержание. Идеи??

<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>

Answer 1

Решение состояло в том, чтобы не использовать видимость: скрытый, поскольку он просто скрывает контент, а не удаляет его из предварительного просмотра. Поэтому используйте display:none в контенте, который вы хотите пропустить.