Html Can'；t让带有@media print的css正常工作

我正试图使它这样，当我试图打印我的网页，唯一打印的东西是从该页1长单div

经过一些研究，我发现如何通过使用@media print限制浏览器只打印某些元素，并将我不想显示的元素的可见性设置为hidden

这是我目前正在使用的css来实现这一点：

@media print {
html, body{
    overflow-y: hidden;
}
body * {
    visibility: hidden;
}

table {
    float: none !important;
}
div {
    float: none !important;
}


#PermitDetails, #PermitDetails * {
    visibility: visible;
}

#PermitDetails {
    position: absolute;
    top: 0px;
    left: 0px;
}
}

此代码允许在打印时显示PermitDetails div，并在打印时隐藏任何其他元素（和滚动条）

这是PermitDetails div的代码：

<div class="col-md-12 col-lg-10">
    <div class="panel panel-default" id="PermitDetailsPanel">
        <div class="panel-heading">
            <strong>Permit Details</strong>
        </div>
        <div class="panel-body" id="PermitDetails">
        </div>
    </div>
</div>

许可证详情

这个div是根据用户在页面上选择的选项动态填充的，因此它的大小总是不同的

我在这方面遇到的问题是，如果我尝试打印页面，我确实只能看到包含正确信息的div，但是有两件事是错误的：

即使将div的位置设置为绝对，并将left和top设置为0，它仍然将自身定位在页面的中心。我还注意到它会根据我当前滚动到的页面的位置上下移动

如果我选择了足够的信息使div填满页面，则信息不会移动到第二页进行打印。它只会填满第一页，一到底部就会被剪掉。这也会根据我在页面上滚动的位置进行移动

我读到这可能是由于bootstrap如何浮动列，所以我尝试将div标记设置为浮动：css中的none（如上所示），但这并没有改变任何事情

---

我真的不知道还有什么问题。任何帮助都将不胜感激。如果需要更多信息，请告诉我。

您是否尝试过使用

display:none

而不是

visibility:hidden

来隐藏内容，然后您可能不需要在

#PermitDetails

上使用

位置：absolute

？@michaelocker不

显示：无

也隐藏我应用它的任何对象的子对象？我想我已经试过了，还尝试过将

#PermitDetails

的显示设置为其他内容，但仍然存在问题。啊，对不起，我没有看到您的HTML结构。如果将

.permitParent

添加到“permit”元素的祖先，并设置

*：not（.permitParent）{display:none；}

，会怎么样？我可以试着把它作为一个故障排除步骤，看看打印样式表如何处理隐藏在

visibility:hidden

vs

display:none

@michaelocker中的元素是否有问题，这似乎也不起作用。似乎

display:none

将隐藏子元素，即使它们的设置不同。