javascript - css @print media 显示隐藏内容的空间

Question

我有一个 Angular 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 数据。

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

Answer 1

visibility: hidden

让您的元素保持在文档流中，只是隐藏任何内容。这是你的问题的原因。

display: none

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