时间戳

首页 > 解决方案 > HTML CSS 打印页面删除顶部和底部的空格

html - HTML CSS 打印页面删除顶部和底部的空格

问题描述

我正在尝试打印 HTML 页面，但我很难摆脱页面顶部和底部的额外空白。

这是打印预览的样子（指向空格的箭头）：

在此处输入图像描述

和我的 CSS：

@@media print {
        body {
            margin: 5px;
        }

        .body.menubar-top {
            padding-top: 0px;
        }

        .no-print {
            display: none;
        }

        #section-to-print, #section-to-print * {
            visibility: visible;
            margin-top: 0px;
            padding-top: 0px;
        }

        #section-to-print {
            /*position: absolute;*/
            /*left: 0;
            top: 0;*/
        }
    }

和页面代码：

    <div class="row" id="section-to-print" style="vertical-align:top">

    <div class="col-md" id="projectDetails">

        <div class="col-md-12">
            <h3 class="headerTitle">
                Main Title
            </h3>
        </div>

        <div class="col-md-12">
            <h4 class="headerTitle">
                Sub title
            </h4>
        </div>

        <div class="row">
            <div class="col-md-12">
                <h5>
                    Project Details
                </h5>
            </div>
        </div>

etc......

我有一段时间没有创建打印页面，但我相信这应该很简单。

标签： htmlcss

解决方案

您的代码看起来完全有效。我用你的代码制作了 JSFiddle：

https://jsfiddle.net/a6fu1vcg/2/

例如，如果您有例如代码：

body {
  margin: 200px;
}

当您尝试打印它时，它将被覆盖：

@media print {
        body {
            margin: 5px;
        }
}

打印文档将有 5px 的正文边距。

确保您没有任何其他样式，例如!important覆盖您的打印样式

推荐阅读