두 div 요소 사이의 페이지 나누기 방지

Question

지금 당장 문제가 있습니다. 파이어 폭스 (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> 

EDIT처럼 보이는이 : 일부는 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의 계산 된 높이 (개똥 벌레와 caculated) 874px입니다 내용이 콘텐츠 섹션 페이지에 들어갈 정도로 짧은 경우 지적 끄트머리해야

(#d)는 페이지 나누기가 없으며 첫 번째 페이지에 머물러 있습니다. 크롬에서 예를 들어, 내가 #D의 내용이 두 번째 페이지에 과다 출혈 것을 볼 수있을 때,

에만 발생합니다.

그래서 여기에 질문이 있습니다. #c div와 #d div 사이의 줄 바꿈을 방지하려면 어떻게해야합니까?

Answer 1

인쇄 할 때 페이지 나누기를 방지하는 방법은 무엇입니까?

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

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

Answer 2

같은 문제가 있습니다. 그리고 해결책을 찾았습니다!

내 상황 :

• A는 매우 긴 사전
• 를 사전에 내가 포함 된 제목
• 다음 다른 DIV 역할을하는 사업부가 여러 페이지에 걸쳐 확장

예 :

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

문제점 : 사업부는 2 페이지 페이지 1

사전 시작에 나타납니다

• 내 제목 -은 "제목"과 내용 사이 너무 거대한 격차.

솔루션 :

마지막으로, 내 사전 스타일 display: inline을 시도했다. 타다! 이제 내 머리글 div와 함께 1 페이지에있는 사전 시작의 시작!

아마도이 기능을 제어하기 위해 요소 표시를 엉망으로 만들 수 있습니다. 누구든지 다시 여기에 걸려 넘어지기를 바랍니다.