防止 2 个 div 元素之间的分页符答案

【问题标题】：Prevent Page Break between 2 div elements防止 2 个 div 元素之间的分页符
【发布时间】：2012-03-03 02:18:36
【问题描述】：

我现在遇到了很大的问题。仅在 Firefox 中存在问题（使用 FF10 进行测试），此错误不会在 Chrome 17 或任何 IE 中发生。

事情就是这样。我的页面架构看起来像这样

<div id="container">
    <div id="a">
        <img src="foo/bar.png" />
    </div>
    <div id="b">
        <div id="c">
            <!--short content-->
        </div>
        <div id="d">
            <!--long content-->
        </div>
    </div>
</div>

编辑：有些人要求 CSS 的一部分。我这里的代码被简化了很多，这里有一个简化版的 css 来匹配。

#container {
    margin: 0 auto;
    position: relative;
    width: 1000px;
}

#a{
    height: 156px;
    margin: 0 auto;
    position: relative;
    text-align: center;
    top: 2px;
    width: 918px;
}

#b {
    background-color: #FFFFFF;
    font-size: 12px;
    margin: 0 auto;
    text-align: left;
    width: 958px;
}

#c{
    background: url("images/top_content.gif") no-repeat scroll left top #FFFFFF;
    height: 50px;
    margin: 0 auto;
    width: 100%;
}

#d{
    padding: 40px 0px;
}

作为奖励，#d div 的计算高度为 874px（使用 firebug 计算）

还应指出，当内容足够短以适合页面时，内容部分 (#d) 不会有分页符并停留在第一页上。

这只发生在例如在 chrome 中，我可以看到 #d 的内容将在第二页溢出。

所以问题来了。如何防止 #c 和 #d div 之间出现换行符？

【问题讨论】：

您能否更新您的问题，同时发布容器、a、b 和 c 元素的 CSS？无论如何，您的容器 div 上都缺少关闭 >
我刚刚在问题中添加了 CSS 的一部分。
这只是在打印过程中发生，还是在正常查看页面时发生？
仅在打印期间...我看不出您如何在正常网页中出现分页符... :)
好吧，我只是通过将#a 和#c div 放在#d div 的开头并使用CSS 仅在打印页面时才显示它们来解决问题。但是，如果有人对此问题有可靠的答案，欢迎他发表。该旁路不会每次都起作用。

标签： html css firefox printing page-break

【解决方案1】：

你的意思是如何在打印时防止分页？

#c{
    page-break-after: avoid;
}

#d {
    page-break-before: avoid;
}

请注意，“新”的做法是使用通用的 break-before 和 break-after，如下所示：

#c{
    break-after: avoid-page;
}

#d {
    break-before: avoid-page;
}

但这并不是所有浏览器都支持的。见https://developer.mozilla.org/en-US/docs/Web/CSS/break-before和https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

【讨论】：

这确实给了我一些希望。我试过了，没有用。 W3Schools 说：“注意：Firefox、Chrome 和 Safari 不支持属性值“avoid”、“left”或“right”。好吧，至少知道这一点是件好事。以后可以派上用场。
嗯，太糟糕了。如果您在#d 中有一些较小的细分会发生什么？这会破坏#d 吗？
#d div 中已经有大量细分。我只是简化了发布问题的代码，而没有透露太多关于项目的信息。在 #d div 中，还有 2 个其他 div，一个包含段落，另一个包含滑块。
在那种情况下，我真的没有想法......我很抱歉:(infohost.nmt.edu/tcc/help/pubs/css/at-page.html 可能会提供一些关于@page 注释的有趣信息，但恐怕它可能不会解决您的问题。
这已被break-before 和break-after 替换为值avoid-page。参考：MDN | break-after - CSS

【解决方案2】：

我来到这里，遇到同样的问题。我找到了解决方案！

我的情况：

我有一个用作标题的 div
然后是另一个 div，其中包含一个很长的 pre
pre 跨越多个页面

示例：

<div>Heading</div>
<div>
    <pre>Very long pre.</pre>
</div>

问题：

My Heading Div 出现在第 1 页上
pre 从第 2 页开始 - “标题”和内容之间的差距如此之大。

解决方案：

最后，我尝试制作我的预样式display: inline。多田！现在我的标题 div 和第 1 页上的 pre start 一起开始！

也许您可以弄乱元素的显示以更好地控制它。希望这对可能再次在这里绊倒的人有所帮助！

【讨论】：