CSS 分页媒体，div 分页到下一页

Question

我需要你的帮助，

我似乎无法弄清楚为什么在 Internet Explorer 11 中完成打印预览时 div（下边框）会中断到下一页：

无论哪种方式，如果可以正确完成，或者通过其他方法，我都希望在页面周围有一个 1px 的边框（信纸大小，8.5 英寸 x 11.0 英寸），并带有一些边距。

这是有问题的 HTML 和 CSS 标记：

<!DOCTYPE html>

<html>

<head>

<style type="text/css">
@page {
    margin: 0.25in;
}
html,body {
    height: 100%;
    margin: 0;
    padding: 0;
}
.table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.table td {
    padding: 0;
}
</style>

</head>

<body>


<div style="border:1px solid grey; height: 100%;">
<table class="table" cellspacing="0" cellpadding="0">
    <tr>
        <td>File Number:</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
        <td>&nbsp;</td>
    </tr>
</table>
</div>


</body>

</html>

Answer 1

问题与 CSS 框模型有关。默认情况下，边框添加到 width/height 的 outside，因此您需要将 box-sizing 更改为 border box，这会将边框放在 width/height 的 内：

<div style="border:1px solid grey; height: 100%; box-sizing: border-box">...

如果您不将其更改为边框框，div 的高度将是 100% + 2px（上边框为 1px，下边框为 1px），这会导致溢出到一秒页。

CSS 分页媒体，div 分页到下一页

CSS Paged Media, div page breaks onto next page

html

css

printing

css-paged-media