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 that you have read and understand our privacy policy and code of conduct.

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