Question

在Firefox中打开以下HTML

<!doctype html>
<html>
    <body>
        <div style="width: 1000px; height: 4000px;">
            <div style="margin-left: 500px; margin-top: 2000px; position: absolute;">Caption </div>
        </div>
    </body>
</html>

点击打印 - ＆gt;预览。

您希望在第二页（纵向模式）中看到标题字样，但所有页面都是空的。

Answer 1

您的问题是position:absolute。您的元素没有定位祖先，因此其包含块是初始包含块，每http://www.w3.org/TR/CSS21/visudet.html#containing-block-details。在打印CSS中，初始包含块是第一页的区域，每http://www.w3.org/TR/CSS21/page.html#page-area

所以你要求元素放在文档的第一页，从页面顶部开始是2000px。当然，这恰好是在页面底部。没有任何说这会产生更多的页面......

Answer 2

有趣。

当然，您可以为打印媒体编写CSS：

http://www.w3schools.com/css/css_mediatypes.asp

因此，在打印时，可以将height属性指定为远小于4000px的值。

然后，为什么你需要这么大的高度？

Firefox无法打印大型div的内容

2 个答案: