打印时隐藏浏览器默认页眉页脚但保留默认页码的实现问题

你的代码没生效的核心原因是：浏览器默认的页眉页脚（比如左上角的网址、右上角的文档标题、顶部日期等）并非完全通过@top区域的content属性控制，它们和页面边距绑定紧密。仅清空@top的内容不足以让这些默认元素消失，浏览器仍会在预留的边距区域加载默认内容。

要实现隐藏页眉页脚的多余内容，但保留默认页码计数器，可以按以下方式修改CSS：

@media print {
  @page {
    /* 设置合适的上下边距：给页码留足显示空间，同时让默认页眉内容超出打印区域 */
    margin-top: 1cm;
    margin-bottom: 1cm;
    
    /* 清空顶部所有区域的内容，彻底隐藏默认页眉的网址、标题等元素 */
    @top-left {
      content: none;
    }
    @top-center {
      content: none;
    }
    @top-right {
      content: none;
    }
    
    /* 不要设置@bottom相关的content属性，让浏览器默认的页码计数器正常显示 */
  }
  
  /* 可选优化：如果页面底部内容和页码区域重叠，给body添加底部内边距 */
  body {
    margin-bottom: 2cm;
  }
}

补充说明： #

• 不同浏览器对@page规则的支持略有差异，比如Chrome可能需要你在打印预览的「更多设置」里确认「页眉和页脚」选项状态，但通过上述CSS，大部分场景下能自动隐藏多余内容并保留页码。
• 边距数值可根据实际需求调整，确保页码能正常显示在页面底部，同时顶部的默认页眉内容被挤出打印区域。

内容的提问来源于stack exchange，提问作者Vu Duc Hau