Как эмулировать разрыв страницы с помощью CSS и HTML?

Question

Я пытаюсь сгенерировать класс CSS, который поможет мне определить «разрыв страницы».

Я знаю, что если я использую @media:print .MyDiv{ width:100%; height:100%; }, я могу установить класс div на MyDiv, и это будет - как можно лучше - 1 страница печати.

Это замечательно, но я столкнулся с новым предметом, с которым я не знаю, как обращаться, и я надеюсь, что что-то подобное можно сделать. Мне нужно создать пустой div, который будет растягиваться до «конца страницы».

Что-то вроде:

<style type="text/css">
@media print .PageBreak { 
    width: 100%; 
    height: *; /* space left on current page */ 
}
@media screen .PageBreak {
    border-bottom: 1px solid black;
}
</style>

<!-- ... -->

<div>This should appear on the first page.</div>

<div class="PageBreak"><!--
    This DIV should stretch itself out so that the next piece
    of content appears on the next page (only when printing).
--></div>

<div>This should appear on the second page.</div>

Answer 1

Это для печати, верно?

Разве вы не можете просто использовать это?

<p style="page-break-before: always"></p>

Существуют и другие варианты разрыва страницы перед , о которых тоже стоит знать.

Answer 2

Если кто-то заинтересовался решением, которое я использовал:

<style type="text/css">
@media print {
    .PageBreak {
        page-break-before: always;
    }
}
@media screen { 
    .PageBreak { 
        border-bottom: 1px dashed black; 
        width: 100%;
        margin-bottom: 12px; 
    }
}
</style>

Так просто. Спасибо Марк и Марк .

Answer 3

Извините, если я что-то упустил, но есть причина, по которой вы не можете использовать разрыв страницы по умолчанию в css.

Задание разрывов страниц для печати с использованием CSS

Answer 4

Если ваш html идет как вложение, и если пользователь просматривает файл с помощью gmail, gmail удаляет любое правило css, содержащее правило свойства разрыва страницы.