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

Question

我现在遇到了很多问题。它只是在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之间的换行？

Answer 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

Answer 2

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

我的情况：

• 我有一个div作为标题
• 那么另一个包含很长前的div
• 预先扩展到多个页面

例：

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

问题：

• My Heading Div出现在第1页
• 预先从第2页开始 - 所以“标题”和内容之间存在巨大差距。

解决方案：

最后，我尝试制作我的前风格display: inline。田田！现在我的标题div和第1页的预开始一起！

也许你可以搞乱你的元素显示来更好地控制它。希望这可以帮助那些可能再次绊倒在这里的人！