0

Нужно сверстать страницу, которая внешне будет имитировать печатный документ формата А4. Контент - таблицы, списки, параграфы - генерится динамически и может иметь различный объем.

На "страницах" нужно сделать верхний и нижний колонтитул.

Можно ли добавлять блок колонтитула каждые ХХ рх и чтобы прочие дом-элементы не скрывались под ним, а обтекали его?

1 ответ 1

1

А чем before и after не устраивают?

Через JS content можно менять.

.page {
  border: 1px solid black;
  padding: 10px;
  margin: 10px;
  text-align: center;
}

.page::before {
  background-color: lightgrey;
  content: 'Верхний колонтитул';
  display: block;
  margin: -10px -10px 0;
  text-align: left;
}

.page::after {
  background-color: lightgrey;
  content: 'Нижний колонтитул';
  display: block;
  margin: 0 -10px -10px;
  text-align: right;
}
<section class="page">
  Page 1
</section>
<section class="page">
  Page 2
</section>

Дополнение к ответу:

Вы можете добавить колонтитулы для каждой страницы через конструкцию $('.page').prepend(pageHeader).append(pageFooter). Как у Вас реализована логика переноса части контента на новую страницу (в случае, если контент не помещается на страницу) я не знаю. Я реализовал в данном примере только изменение цвета рамки страницы (зелёная - если контент помещается на страницу целиком и красная - если контент не помещается и требуется перенос).

Вот пример кода для 3-х страниц с разным контентом:

$.fn.hasScrollBar = function() {
  return this.get(0).scrollHeight > this.innerHeight();
} // делаем ф-ию проверки на скролл

const pageHeader = $('<div />', {
  id: 'page-header',
  html: 'Header'
}); // верхний колонтитул
const pageFooter = $('<div />', {
  id: 'page-footer',
  html: 'Footer'
}); // нижний колонтитул

$('.page').prepend(pageHeader).append(pageFooter).each(function() {
  markPage($(this), ($(this).hasScrollBar()) ? 'red' : 'green');
}); /* добавляем колонтитулы для каждой страницы
       и проверяем, соответствует ли она формату А4 (зелёная - да, красная - нет) */

function markPage(page, color) {
  $(page).css('border-color', color);
} // красим рамку страницы в зависимости от того, соответствует ли она формату А4
.page {
  background-color: white;
  border: 1px solid black;
  height: 200px; /* допустим это высота А4 */
  padding: 10px;
  margin: 10px;
  overflow: auto;
  position: relative;
  width: 150px; /* допустим это ширина А4 */
}

#page-header {
  background-color: white;
  border-bottom: 1px dotted black;
  margin-top: -10px;
  padding: 10px 0;
  position: sticky;
  top: -10px;
}

#page-footer {
  background-color: white;
  border-top: 1px dotted black;
  bottom: -10px;
  margin-bottom: -10px;
  padding: 10px 0;
  position: sticky;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<section class="page">
  <h1>Заголовок</h1>
  <p>Текст 1</p>
  <p>Текст 2</p>
</section>
<section class="page">
  <p>Текст 1</p>
  <p>Текст 2</p>
  <p>Текст 3</p>
  <p>Текст 4</p>
  <p>Текст 5</p>
</section>
<section class="page">
  <p>Текст 1</p>
  <p>Текст 2</p>
  <p>Текст 3</p>
  <p>Текст 4</p>
  <p>Текст 5</p>
  <p>Текст 6</p>
  <p>Текст 7</p>
  <p>Текст 8</p>
  <p>Текст 9</p>
  <p>Текст 10</p>
</section>

3
  • 1
    Да в принципе можно и блоками сделать: до и после основного контента. Тогда туда можно вообще что угодно вставить.
    – Kvilios
    20 фев 2019 в 10:10
  • кажется Вы не поняли моей проблемы. то, что Вы предложили - не проблема сделать для статической странички. Но у меня контент динамический. Я заранее не знаю количество блоков (ну например) р в каждой section (если брать Вашу разметку). И не знаю длину текста в каждом р. Так что я не могу гарантировать, что каждый section будет выглядеть как лист формата А4. А должен выглядеть.
    – muturgan
    20 фев 2019 в 11:48
  • 1
    @muturgan, я дополнил ответ. Чтобы контент не уходил под колонтитулы, достаточно убрать правило position: sticky; в css (тогда колонтитулы будут в общем потоке).
    – Kvilios
    20 фев 2019 в 13:29

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.