gpt4 book ai didi

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

转载 作者:可可西里 更新时间:2023-11-01 13:26:36 25 4
gpt4 key购买 nike

我需要你的帮助,

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

无论哪种方式,如果可以正确完成,或者通过其他方法,id 理想情况下都希望在页面周围有一个 1px 的边框(信纸大小,8.5 英寸 x 11.0 英寸)并带有一些边距。

enter image description here enter image description here

这里是有问题的 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>

最佳答案

问题与 CSS 框模型有关。默认情况下,边框添加到宽度/高度的外侧,因此您需要将 box-sizing 更改为 border box,这会将边框放在宽度/高度的内侧宽度/高度:

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

如果您不将其更改为 border-box,则 div 的高度将为 100% + 2px(上边框为 1px,下边框为 1px),这会导致溢出到第二页。

关于CSS 分页媒体,div 分页到下一页,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37146247/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com