防止2个div元素之间的分页符 [英] Prevent Page Break between 2 div elements

问题描述

我现在遇到了很大的问题.它只在Firefox(使用FF10测试)中困扰，在Chrome 17或任何IE中都不会发生此错误.

I'm having quite the problem now. It's only bothering in Firefox (Testing with FF10), this bug doesn't happen in Chrome 17 or any IE.

这是东西.我的页面架构看起来像这样

Here's the thing. I have a page architecture looking like this

<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的简化版本.

Some asked for the a part of the CSS. My code here being simplified a lot, here's a simplified version of the css to match.

#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(使用萤火虫计算)

as a bonus, the calculated height of the #d div is 874px (caculated with firebug)

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

Should aslo point out that when the content is short enough to fit in the page, the content section (#d) won't have a page break and stays on the first page.

仅当例如在chrome中，我可以看到#d的内容在第二页上流血时才会发生.

This only happens when, for example in chrome, I can see that the content of #d will bleed out on the second page.

这是问题.如何防止#c和#d div之间出现换行符?

So here is the question. How do I prevent a line break between the #c and #d divs?

推荐答案

您的意思是在打印时如何防止分页?

You mean how to prevent a page-break when printing?

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

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

请注意，执行此操作的新"方法将使用通用的break-before和break-after，如下所示:

Note that the 'new' way of doing it would be using the generic break-before and break-after like this:

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

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

但是，并非所有浏览器都支持此功能.参见 https://developer.mozilla.org/zh-CN /docs/Web/CSS/break-before 和 https://developer.mozilla.org/zh-CN/docs/Web/CSS/break-after

But this is not supported in all browsers yet. See https://developer.mozilla.org/en-US/docs/Web/CSS/break-before and https://developer.mozilla.org/en-US/docs/Web/CSS/break-after

这篇关于防止2个div元素之间的分页符的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！