HTML，当内容达到一定高度时如何制作可重复的页眉和页脚？

Question

Lets say that we have HTML template that has that kind of structure:

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

Header Data , Main Data and Footer Data have fixed height value.

However when Main Data starts to exceed its fixed height value, it should turn into something like this:

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

Is it possible to do that kind of thing only by using HTML and CSS?

Answer 1

For @media screen , you should use a single <header> and <footer> and make the contents scrollable between the two.

For @media print , the obsolete solution (but it always worked) was to place everything in a <table> and use <thead> and <tfoot> elements with display values of table-header-group and table-footer-group , respectively.

The modern solution for @media print , however, is to use running elements :

header {
  position: running(header);
}

footer {
  position: running(footer);
}

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

For details on how to use the @page model, please refer to the official documentation . Also note its current browser support is slightly below 80% , globally.