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（放火魔とcaculated）

で、コンテンツはページ内に収まるように十分に短いときと指摘したコンテンツのセクションをasloべき（#d）はページ区切りを持たず、最初のページにとどまります。クロムでは、たとえば、私は#Dの内容は2ページ目にブリードアウトすることを見ることができたときに、

にのみ発生します。

ここに質問があります。 #cと#d divの間で改行を防止するにはどうすればよいですか？

Answer 1

印刷時に改ページを防止する方法を教えてください。

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

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

Answer 2

私は同じ問題を抱えてここに来ました。そして私は解決策を見つけました！

私の状況：

• 非常に長い前
• を事前に私が含まれている見出し
• その後、別のdivとして機能div要素を持っているが、複数のページを横切って延び

例：

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

問題：本部は、2ページのページ1

事前開始に表示されます

• マイ見出し - 「見出し」とコンテンツの間にそれほど大きなギャップ。

ソリューション：

は最後に、私は私の前のスタイルdisplay: inlineを作ってみました。タダ！今私の見出し部門と一緒に1ページ目のプレスタートの始まり！

おそらく、あなたはこれをより良く制御するために要素の表示を混乱させることができます。誰もがここで再び遭遇するのを助けることを願っています！