减少内联块元素的宽度会导致Chrome在生成的PDF中生成额外的页面

vom3gejh 于 2023-09-28 发布在 Go

关注(0)|答案(1)|浏览(83)

在下面的HTML中，

<html lang="en">
<head>
    <title>Document</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div>test</div>
</body>
</html>

我有一个简单的div元素，我的样式如下：

body {
    box-sizing: border-box;
    margin: 0;
}

div {
    display: inline-block;
    border: 2px solid red;
    height: 100vh;
    width: 100vw;
}

@page {
    margin: 0;
}

当我在Chrome中使用PDF打印功能时，生成的PDF是一个页面，div元素占据了页面的整个高度和宽度。
然而，当我将CSS规则中的div元素的width属性更改为小于100vw的任何值，同时保持高度为100vh时，生成的PDF有两页长，这是没有意义的。
为什么会发生这种情况，我如何设置div的宽度，而不会导致在生成的PDF中生成新页面？

google-chrome

来源：https://stackoverflow.com/questions/76966819/reducing-width-of-inline-block-element-causes-additional-page-to-be-generated-by