Как повторить html-элемент внутри контейнера div после каждой заданной высоты (скажем, после каждых 10 см) для заданной высоты контейнера?

Question

Я пытаюсь создать угловой компонент, похожий на бумагу А4.

Когда пользователь вводит в него содержимое, бумага расширяется, поскольку я установил только минимальную высоту div в 29,7 см.

Примечание. Этот элемент использует только один элемент div. Добавление нескольких блоков div для каждой страницы нарушит поток контента между страницами при редактировании пользователем.

Я хотел бы отобразить номер страницы внизу, когда пользователь вводит в него содержимое через каждые 27,9 см. Номер страницы должен быть недоступным для редактирования контентом в div.

Возможно ли это с чистым html и CSS-заголовком? или это возможно только с новым угловым компонентом?

Элемент выглядит следующим образом.

Заранее спасибо.

StackBlitz https://stackblitz.com/github/rahulgul8/paper

Ожидаемая бумага выглядит следующим образом.

Запишите номера страниц красным цветом.

по мере того, как пользователь вводит дальше, и когда снова достигается 29,7 см, элемент снова добавляет номер страницы 3 в конец страницы.

Answer 1

Видя ваш пример кода, вы можете добавить номера страниц к вашему div, включив эти стили

div:after {
  content:attr(data-page);
  position:absolute;
  bottom:10px;
  left:50%;
  transform:translateX(-50%);
  color:red;
}

И добавив data-page="1" к вашему элементу div