Question

我正在尝试将html页面设置为法院诉状，需要在8.5 x 11的纸上整齐地打印。我希望将其指定为HTML，但是当我打印时，容纳内容的容器会扩展到正文之外。

我尝试为容器设置特定的宽度以匹配主体，但这没有用。

我用HTML和CSS创建了一个小提琴：

以下是BODY和CONTAINER的CSS：

body {
    width: 8.5in;
    height: 11in;
    padding-left: 1.5in;
    padding-right: .5in;
    margin: 0;
    border-left: 1px solid grey;
    border-right: 1px solid grey;
}

.container {
    border-left: 2px solid black;
    border-right: 2px solid black;
    width: 8.5in;
    margin: 0;
    padding: 5px;
    height: 100%;
}

如果单击结果底部的“打开打印预览”文本，然后尝试打印，则可以在Chrome的打印预览窗口中查看文档的变化。

此应用程序专门用于Chrome。我正在尝试生成一个类似于以下内容的文档，灰色细线表示页面边缘：

Answer 1

我不确定这是您要寻找的solution。我在其他浏览器的打印预览功能中测试了您的代码，并发现了不同的结果。然后，我坚持使用谷歌浏览器并进行相应的编码。

我发现您两次使用相同的代码，因此无法正常工作！我将其他代码放入screen only中。并为print

更改以下代码

 @media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }

    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 100%;
        margin: 0;
        padding: 5px;
        height: 100%;
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
        padding-left: 1.5in;
        padding-right: .5in;
    }
}

在我的代码中，我删除了textarea，而是放置了一个具有可编辑功能的<p>标签。请查看代码，让我知道您的意见。

这就是我在Google Chrome中的功能。

我尝试了几种选择，但没有找到合适的选择！但是，这很棘手！刚刚将以下代码用于print CSS。请替换并测试此代码。

@media print {
    body {
        /* width: 8.5in; */
        /* height: 11in; */
        padding-left: 1.5in;
        padding-right: .5in;
        margin: 0;
        border-left: 1px solid gray;
        border-right: 1px solid gray;
        /*Newly added codes */
        box-sizing: border-box;
    }
    .container {
        border-left: 2px solid black;
        border-right: 2px solid black;
        width: 6.5in;
        margin: 0 auto;
        padding: 10pt 36pt;
        /* height: 100%; */
        /*Newly added codes  */
        box-sizing: border-box;
        /* Copied from body */
    }
}

之后，我在google chrome中使用了自定义边距（尽管我还没有打印出来！所以最好对它进行最终输出测试）。

希望这将满足您的需求！：）

打印时如何防止子div超出父级

1 个答案: