长方形盒子怎么在旋转90度后去除浏览器打印时两侧空白

设置了一个长方形盒子旋转90度后点击浏览器打印预览查看打印效果,发现设置的这个盒子的高度为520px时打印预览为一页并为出现串页现象,但高度为540px时出现串页,但浏览器的打印预览上看两侧还有很大的空间。

img

img

起初我认为可能是body的内边距影响,但设置为0后没有作用。这个高度怎么才能超出这个限制呢?

建议不采用固定像素

为什么要选择90度直接打印的时候选择横向不就可以了吗

img

优先考虑真实打印效果,参考一页内容的宽高空间,将内容控制在一页内,适当留白与增加空白页,考虑页面自适应,解决硬编码带来的局限性

HTML两侧留白的解决以及解决过程

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>title</title>
</head>

<body>
    <div class="box">
    </div>
</body>

<style>
    html{
        background-color: black;
    }
    body{
        height: 300px;
        background-color: darkgoldenrod;
        /* padding: 0px; */
        /* margin: 0px; */
        /* border: 0px; */
    }
    .box{
        background-color: brown;
        width: 100%;
        height: 200px;
    }
</style>
</html>


可能是做了旋转之后导致的,把旋转设置去除掉看看。其次,left和right的比例设置小一点。还有就是可以调整盒子的尺寸和布局,或者使用CSS的@media print规则来为打印预览和实际打印分别设置不同的样式。

这里面更多设置好像可以设置他的宽高那些的。

img

这种情况可能是由于打印机或打印设置的限制导致的。根据你的描述,当盒子的高度为520px时,打印预览为一页并没有出现串页现象,但高度为540px时就出现了串页。

首先,确保页面设置和打印设置是正确的。在浏览器的打印预览界面,检查一下设置是否为纵向打印模式,而非横向或自动模式。另外,也可以尝试调整页面边距和缩放等设置,以适应打印页面。

如果以上调整没有解决问题,那么可能是由于打印机或打印设置的限制导致的。考虑到打印机的打印区域有限,可能无法完整展示盒子的高度为540px的内容,导致出现串页现象。同时,即使在打印预览上看两侧有很大的空间,但实际打印时可能会根据打印设置进行调整,以适应打印机的打印区域。

如果需要确保打印效果的稳定性,可以尝试以下方法:

  1. 调整盒子的尺寸和布局:根据打印机的打印区域,尝试调整盒子的尺寸和布局,使其适应打印纸张的大小。

  2. 分割内容到多个页面:如果一个盒子的高度超过了打印纸张的限制,可以将内容划分到多个页面上进行打印。可以使用CSS的分页属性(如page-break-beforepage-break-after)或将内容分割为多个部分来实现。

  3. 利用打印样式表:使用CSS的@media print媒体查询,为打印视图定义特定的样式表。通过合理设置样式表,可以调整页面布局和尺寸,以适应打印机的限制。

  4. 考虑嵌套盒子:如果一个盒子的高度超过了打印机的打印区域,可以尝试使用嵌套盒子的方式,将内容分割成更小的部分进行打印,从而避免了铺满整个页面的问题。

最后,要实现更精确的打印效果,建议与设计师或打印专家进一步讨论,了解打印机的具体限制和打印设置,以找到更适合的解决方案。