Ответ 1
Programatically. Создайте HTML-div. Установите для этой ширины и высоты div фиксированную сумму и переполнение для прокрутки.
<div style="height:1000px; width: 500px; overflow-y: scroll;">
...
</div>
Обработать уценку в HTML-элементы. У меня есть 5 тегов h1
, каждый из которых имеет высоту 300 пикселей.
<h1 style="height:300px;">First</h1>
<h1 style="height:300px;">Second</h1>
<h1 style="height:300px;">Third</h1>
<h1 style="height:300px;">Fourth</h1>
<h1 style="height:300px;">Fifth</h1>
Эти 5 h1
не будут помещаться на одной странице. Высота страницы составляет всего 1000 пикселей. На этой странице будут помещаться только теги h1
. Нам понадобится вставить pagebreak после третьего элемента.
Постепенно добавьте каждый новый элемент в DOM. После вставки каждого элемента проверьте, присутствует ли полоса прокрутки браузера. Если это так, то мы знаем, что элемент, который мы только что вставили, слишком велик для этой страницы; удалите элемент и вставьте разрыв страницы.
До:
### First
### Second
### Third
### Fourth
### Fifth
После:
### First
### Second
### Third
------
### Fourth
### Fifth
Это будет работать для любого элемента, и вам не придется беспокоиться о высоте элемента. Потому что, если элемент, который вы только что вставили, сделал прокрутку HTML div, нам нужен разрыв страницы. Изображения, видео, h1, h2, p, custom/dynamic css, что угодно.
UPDATE
Вы также можете рассчитать высоту каждого элемента div. http://api.jquery.com/height/ Таким образом, пересчет 54-страничного документа будет намного проще.