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

Question

我正在尝试将 html 页面格式化为法庭诉状，需要在 8.5 x 11 的纸上整齐地打印出来。我希望将其规范为 HTML，但是当我打印时，包含内容的 Container 扩展到正文之外。

我曾尝试为容器设置特定宽度以匹配正文，但这没有用。

我用 HTML 和 CSS 创建了一个 fiddle：

这里是 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%;
}

如果您单击结果底部的 "Open print preview" 文本，然后尝试打印，您可以在 Chrome 中的打印预览 window 中看到文档如何变化].

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

Answer 1

我不确定这就是您要找的 solution。我在不同浏览器的 打印预览 功能中测试了您的代码，发现了不同的结果。然后我坚持 google chrome 并相应地编码。

我发现你使用了两次相同的代码，所以它不能正常工作！我将其他代码放入 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超出父div

How to keep child divs from expanding beyond the parent when printing

css

printing

css-print