HTML文档第二页横向打印时Div无法铺满页面的解决问询

没问题，这个问题其实是因为浏览器默认的页面边距、html/body的默认样式，加上打印样式的边距限制，导致你的div没法横向铺满整个A4页面。我给你一套调整方案，保证第二页的内容能完美铺满横向页面：

核心调整步骤 #

• 重置全局元素的默认边距：浏览器的html和body元素默认带有margin和padding，会挤压div的空间，需要在打印样式里清除：

  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
  }
  

• 给目标div设置铺满样式：针对第二页的内容容器，设置宽度和高度来匹配横向页面的尺寸：

  div.landscape-full {
    width: 100%;
    min-height: 100vh; /* 确保高度铺满整个页面 */
    margin: 0;
    padding: 0;
  }
  

• 优化打印页面的边距设置：通过@page规则调整打印时的页面边距，避免默认边距限制内容宽度：

  @page {
    size: A4 landscape;
    margin: 0; /* 移除默认打印边距，实现完全铺满；如果需要留边距可以设为0.5cm之类的数值 */
  }
  /* 第一页保持纵向，可单独设置边距 */
  @page :first {
    size: portrait;
    margin: 1cm; /* 给第一页保留正常打印边距 */
  }
  

完整修改后的示例代码 #

<html>
<head>
<style media="print">
  /* 重置全局边距，消除默认留白 */
  html, body {
    margin: 0;
    padding: 0;
    width: 100%;
  }

  div.c {
    text-align: right;
  }

  /* 第一页纵向配置 */
  @page :first {
    size: portrait;
    margin: 1cm;
  }

  /* 其余页面横向配置 */
  @page {
    size: A4 landscape;
    margin: 0;
  }

  /* 第二页内容容器的铺满样式 */
  div.landscape-full {
    width: 100%;
    min-height: 100vh;
    margin: 0;
    padding: 0;
    /* 可选：加背景色方便测试是否铺满 */
    background-color: #f0f0f0;
  }
</style>
</head>
<body>
  <h1>My First Heading</h1>
  <p>这是第一页的纵向内容</p>
  <!-- 强制分页，确保下面的内容进入第二页 -->
  <div style="page-break-after: always;"></div>
  <div class="landscape-full">
    <p>第二页的横向内容，现在可以铺满整个页面了</p>
    <div class="c">右对齐的测试内容</div>
  </div>
</body>
</html>

额外提示 #

• 用page-break-after: always;可以强制第一页结束后分页，确保第二页内容完全在横向页面中显示。
• 如果不需要完全无边界的打印，可以把@page的margin设置为0.5cm或1cm，这样内容会在边距内铺满，更符合常规打印需求。
• 一定要通过浏览器的打印预览（Ctrl+P）查看效果，屏幕显示和打印样式的渲染逻辑会有差异。

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