Question

我已经解决了我的问题： http://jsfiddle.net/g94xyhbn/1/

当我使用Chrome打开打印预览（按“打印”按钮）并选择横向时，结果是下方框似乎消失了。在我的CSS中，在#outsideDiv元素的媒体打印部分下，如果我像这样评论 overflow：hidden 行，

@media print
{
    #printButton
    {
        display:none;
    }
    #outsideDiv
    {
        left:0px;
        top:50px;
        /*overflow:hidden;*/
        height:900px;
    }
}

一切都恢复正常。我使用的是Chrome版本38.0.2125.122 m。此外，在纵向模式下，打印预览显示正常。

隐藏溢出物与盒子消失有什么关系？我不明白发生了什么。

Answer 1

它完全正是它所说的。

由于您在height上有一个已定义的width和#outsideDiv，因此您的CSS隐藏了不属于此类的所有内容。请记住，像素不会在屏幕与页面之间以相同的比例进行转换。一般来说，页面为72 PPI（每英寸像素数），而打印页面通常为300 DPI（每英寸点数）。甚至还有单位转换（pixel到dot），因为媒介是根本不同的。

因此，用于#outsideDiv尺寸的更好单位可以是in或cm，具体取决于您更习惯使用的单位。

只要overflow设置为hidden，就不会在框的边界外显示任何内容。

或者，您可以明确覆盖height媒体查询中的width和print规则。这只会告诉div扩展到其内容的大小。您在小提琴中显示的孤立用例没有真正的区别，但是如果打印的那个元素周围存在元素，则会导致#outsideDiv在DOM流中为自己正确保留空间。 / p>

在Chrome中打印预览可以使用CSS样式“overflow：hidden”更改div位置

1 个答案: