Question

让我们说我们有具有这种结构的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来做这种事情？

Answer 1

对于@media screen，您应该使用单个<header>和<footer>，并使内容在两者之间可滚动。

对于@media print，过时的解决方案（但始终有效）是将所有内容放置在<table>中，并将<thead>和<tfoot>元素与display一起使用值分别为table-header-group和table-footer-group。

然而，@media print的现代解决方案是使用running elements：

header {
  position: running(header);
}

footer {
  position: running(footer);
}

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

有关如何使用@page模型的详细信息，请参阅official documentation。另外请注意，全局上当前对浏览器的支持仅below 80%。

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

1 个答案: