Блог

Главная - Вопросы по программированию - HTML, как сделать повторяемый верхний и нижний колонтитулы, когда содержимое достигает определенной высоты?

HTML, как сделать повторяемый верхний и нижний колонтитулы, когда содержимое достигает определенной высоты?

#javascript #html #css

#javascript #HTML #css

Вопрос:

Допустим, у нас есть HTML-шаблон, который имеет такую структуру:

 -------------
|Header Data|
-------------
|           |
| Main Data |
|           |
-------------
|Footer Data|
-------------

Header Data , Main Data и Footer Data имеют фиксированное значение высоты.

Однако, когда Main Data начинает превышать фиксированное значение высоты, оно должно превратиться во что-то вроде этого:

 -------------
|Header Data|
-------------
|           |
| MainData1 |
|           |
-------------
|Footer Data|
-------------
-------------
|Header Data|
-------------
|           |
| MainData2 |
|           |
-------------
|Footer Data|
-------------

Возможно ли сделать что-то подобное только с помощью HTML и CSS?

Комментарии:

1. Не совсем то, о чем вы просили, но простой способ решить проблему? overflow-y ? developer.mozilla.org/en-US/docs/Web/CSS/overflow-y

2. Вы просто спрашиваете о верхнем / нижнем колонтитулах с фиксированной позицией? Или вы действительно хотите, чтобы они дублировались и перемещались при прокрутке страницы?

3. @DBS Я хочу, чтобы они были дублированы

4. Это для печатного макета?

5. Общим решением для @media screen является прокрутка основных данных между верхним и нижним колонтитулами. Общим решением для @media print является размещение всего в <table> и размещение данных заголовка в <thead> ( display: table-header-group; ), а данных нижнего колонтитула в <tfoot> ( display: table-footer-group; ). Печать <table> автоматически добавит верхний и нижний колонтитулы на каждой странице.

Ответ №1:

Для @media screen вы должны использовать один <header> и <footer> и прокручивать содержимое между ними.

Для @media print устаревшего решения (но оно всегда работало) было поместить все в <table> и использовать <thead> элементы <tfoot> and display со table-header-group значениями table-footer-group и, соответственно,.

Однако современным решением для @media print является использование бегущих элементов:

 header {
  position: running(header);
}

footer {
  position: running(footer);
}

@page {
  @top-center {
    content: element(header);
  }
  @bottom-center {
    content: element(footer);
  }
}

Для получения подробной информации о том, как использовать @page модель, пожалуйста, обратитесь к официальной документации. Также обратите внимание, что его текущая поддержка браузером немного ниже 80% во всем мире.