Предотвратить разрыв страницы между двумя элементами div - PullRequest
Новая
       22

Предотвратить разрыв страницы между двумя элементами div

5 голосов
/ 10 февраля 2012

У меня сейчас довольно проблемы. Это беспокоит только в 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 with firebug)

Следует также отметить, что когда контент достаточно короткий, чтобы уместиться на странице, в разделе контента (#d) не будет разрыва страницы, и он останется на первой странице.

enter image description here

Это происходит только тогда, когда, например, в chrome, я вижу, что содержимое #d истекает на второй странице.

Так вот в чем вопрос. Как предотвратить разрыв строки между #c и #d divs?

Ответы [ 2 ]

5 голосов
/ 10 февраля 2012

Вы имеете в виду, как предотвратить разрыв страницы при печати? 

#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

1 голос
/ 20 марта 2014

Я пришел сюда, с той же проблемой. И я нашел решение!

Моя ситуация :

  • У меня есть div, который служит заголовком
  • затем еще один div, который содержит очень длинный пре
  • , который предварительно распространяется на несколько страниц

Пример : 

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

Проблема :

  • На странице 1
  • Предварительный просмотр начинается на стр. 2 - поэтому ОГРОМНЫЙ разрыв между «заголовком» и контентом.

Решение:

Наконец, я попытался сделать свой предварительный стиль display: inline. Тада! Теперь мой заголовок div и начало предварительного запуска на первой странице вместе!

Возможно, вы можете возиться с отображением ваших элементов, чтобы лучше управлять этим. Надеюсь, это поможет тому, кто снова споткнется здесь!

...