将模态内容打印为完整的 A4 页

我正在尝试两件事：

1. 在模态中显示内容，就像在 A4 页面上显示的那样
2. windows.print() 通过主流浏览器在 A4 页面上显示模式

以下是我的CSS：

.page {
    width: 210mm;
    min-height: 297mm;
    padding: 20mm;
    margin: 10mm auto;
    border: 1px #D3D3D3 solid;
    border-radius: 5px;
    background: white;
    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
.subpage {
    padding: 1cm;
    border: 5px black solid;
    height: 257mm;
    outline: 2cm #FFEAEA solid;
}

@page {
    size: A4;
    margin: 0;
}

@media print {
    html, body {
        margin:0 !important;
        padding:0 !important;
        height:100% !important;
        visibility: hidden;
    }
        
    .page .subpage .col-md-12,.col-lg-12{
        float:left;
        width:100%;
    }
    .page .subpage {
        padding: 1cm;
        border: 5px black solid;
        height: 257mm;
        outline: 2cm #FFEAEA solid;
        position:absolute;
    }
    .page {
        visibility: visible;
    }
}

Here's how the modal looks:

But this is how it looks on calling window.print() on button click:

我在这里做错了什么？相对的 CSS 新手，已经看过一堆 SO 问题和其他资源，但似乎无法弄清楚这一点。

更新：我使用 z-index:9999 和 width:140% 来获取模态内容（即 class="page"）以覆盖 A4 页面宽度。不要认为这是最好的解决方案，也无法得到高度拉伸整个297mm；高度仍然与第二张图片所示一样。 140% 在通过 Chrome 保存的 pdf 上看起来不错，在 Firefox 中被截断（可以理解），并在 IE 中显示为空白 pdf。更新的 CSS：@media print .page {z-index: 9999;padding: 20mm;margin: 10mm auto;width: 140%;height:100%;position: fixed;top: 15mm;bottom:0;left: 20mm;visibility:visible;}

请尝试这个

@media print{
  body * {
    visibility: hidden;
  }
  #page, #page * {
    visibility: visible;
  }
  #page {
    position: absolute;
    top: 0;
    left: 0;
  }
}