Question

我需要你的帮助，

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

无论哪种方式，如果它可以正确完成，或通过其他方法，id理想情况下是在页面周围获得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盒子模型有关。默认情况下，边框会添加到宽度/高度的外部，因此您需要将框大小更改为边框框，这会将边框设置为内部宽度/高度：

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

如果你没有将它改为边框，则div的高度为100％+ 2px（顶部边框为1px，底部边框为1px），导致溢出到第二页。

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

1 个答案: