分页媒体中页面区域建立包含块的疑问及可运行示例请求

一、Page Area 是什么？和视口的区别 #

首先明确：**Paged media（分页媒体）**就是打印纸、PDF这类按“页”划分的输出载体，浏览器的打印预览/输出也属于这类场景。

page area是分页媒体里单页的核心区域，它和文档视口有相似但本质不同：

• 文档视口是连续媒体（比如网页在浏览器里的显示区域）里的可见区域，动态且可滚动；
• page area是单页打印/分页输出里的固定区域，每个页都有独立的page area，尺寸由纸张大小（比如A4）减去页边距后的区域决定，静态且不可滚动。

二、Page Area 如何建立包含块？ #

在分页媒体的规则里，page area作为包含块的逻辑如下：

• 对于非定位元素：它们的包含块默认是父元素的内容区，但顶级元素（比如<html>/<body>）的包含块是当前页的page area，元素会在这个区域内排版，超出部分自动分到下一页。
• 对于fixed定位元素：连续媒体里fixed相对于视口定位，但在分页媒体中，fixed元素的包含块是page area——这意味着fixed元素会在每一页的相同位置重复出现（比如打印时每页的页眉页脚）。

三、可运行示例（模拟分页媒体场景） #

下面的示例可在浏览器打印预览中查看效果，直观体现page area的作用：

<!DOCTYPE html>
<html>
<head>
    <style>
        /* 定义分页媒体的页面设置，page area为纸张减去页边距的区域 */
        @page {
            size: A4;
            margin: 2cm;
        }

        body {
            font-family: Arial, sans-serif;
            line-height: 1.6;
            margin: 0;
            padding: 0;
        }

        /* 长内容块，会在page area内自动跨页 */
        .content {
            width: 100%;
            height: 1200px;
            background-color: #f0f0f0;
            padding: 1rem;
            box-sizing: border-box;
        }

        /* fixed定位的页眉，基于page area定位，每页重复显示 */
        .fixed-header {
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            padding: 0.5rem;
            background-color: #2c3e50;
            color: white;
            text-align: center;
            margin-top: 2cm; /* 匹配page area的上边距，避免被遮挡 */
        }
    </style>
</head>
<body>
    <div class="fixed-header">每页都会显示的页眉（基于page area定位）</div>
    <div class="content">
        <h1>分页媒体演示内容</h1>
        <p>这是一段长内容，会自动跨页显示...</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
    </div>
</body>
</html>

示例说明： #

1. 打开浏览器打印预览（Ctrl+P/Command+P），可看到长内容自动分成多页；
2. 顶部的.fixed-header会在每一页的相同位置出现，这就是因为它的包含块是当前页的page area；
3. @page规则定义了纸张尺寸和页边距，page area就是纸张减去该边距后的区域，所有内容都在这个区域内排版。

内容的提问来源于stack exchange，提问作者OnlyWick