分页符不起作用

Question

我正在努力将 Google 地图 API 的地图打印在整个页面上，但图像被剪切并分成两个不同的页面。

试过分页属性还是分页打印

这是我的css

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);

}
@media print {
  body, page[size="A4"] {
    margin: 0;
    box-shadow: 0;
    page-break-after: avoid;    
  }
  .go_btn{
display:none;
}

@page {
    margin: 0;

}

}

这是我一直在尝试的测试。有什么想法可能是错误的吗？

Demo

Answer 1

添加这些属性，它将完美运行。高度将其限制为一页，显示强制它填满整个页面。

display:inline-block;
height: 100%;

您 css 中的示例：

body {
  background: rgb(204,204,204); 
}
page[size="A4"] {
  background: white;
  width: 21cm;
  height: 29.7cm;
  display: block;
  margin: 0 auto;
  margin-bottom: 0.5cm;
  box-shadow: 0 0 0.5cm rgba(0,0,0,0.5);

}
@media print {
  body, page[size="A4"] {
    display:inline-block;
    height: 100%;  
    margin: 0;
    box-shadow: 0;
    page-break-after: avoid;    
  }
  .go_btn{
display:none;
}

@page {
margin: 0;

}

}

分页符不起作用

Page Break does not work

css

google-maps