css @print 媒体显示隐藏内容的空间答案

【问题标题】：css @print media showing spaces for hidden contents angularJScss @print 媒体显示隐藏内容的空间
【发布时间】：2015-10-08 12:41:54
【问题描述】：

我有一个角度 SPA。主页分为左右两部分（都有单独的卷轴）。左边部分有链接，右边部分显示这些链接的数据。

这是主要的 CSS。

#left, #right {
    overflow-y: scroll
}
#left {
    margin-top: 75px;
    margin-left: 5%;
    position: absolute;
    left: 0;
    top: 0;
    width: 25%;
    height: 75%;
}
#right {
    margin-top: 75px;
    margin-left: 5%;
    position: absolute;
    left: 25%;
    top: 0;
    float: right;
    width: 70%;
    height: 75%
}

html, body {
    margin: 0; padding:0; border: 0;
    overflow: hidden
}

#printSection {
    visibility:hidden;
}

右侧部分包含一个 div - #printSection 和一个按钮打印。我想在用户单击打印按钮时打印#printSection 的数据。打印 css 是 -

body {
    background-color: white;
    color: black;
    font-family: Times,"Times New Roman",Garamond, serif;
}
body * {
    visibility:hidden;
}
#printSection, #printSection * {
    visibility:visible;
}
#printSection {
    position:absolute;
    left:0;
    top:0;
}

一切都很好，除了点击打印按钮，首先显示左侧部分数据的空白页面，然后是#printSection 数据。

为什么这个空白页面会出现左侧部分数据？请帮我。如果您需要更多输入，请告诉我。

【问题讨论】：

标签： javascript css angularjs

【解决方案1】：

visibility: hidden

将您的元素保留在文档流中，并隐藏任何内容。这就是你的问题的原因。

display: none

从文档流中完全删除元素。

【讨论】：

你的意思是在 print.css 的 body* 中，我应该使用 display: none。如果是，那么我也尝试过。带显示：没有任何东西要打印。
您也可以尝试将“可见性：可见”规则更改为“显示：块”，但这可能会导致您出现问题（并非所有内容都是块元素）。我建议重新设计您的选择器，而不是隐藏正文中的所有内容，然后尝试覆盖它 - 只需不显示您希望不打印的部分。毫无疑问，不显示任何内容，这就是您想要的。

【解决方案2】：

您可以通过 Angular 方式而不是 CSS 来实现这一点

如果您不想在 DOM 中存储元素（在您的情况下），请使用 ng-if 之类的

在控制器中：

 $scope.showdivVar=true;

查看：

<div ng-if="showdivVar"></div>

【讨论】：