Page Break не работает

Question

Im борется с печатью карты из API карт Google на всей странице, но изображение просто обрезается и разделяется на две разные страницы.

Я пробовал атрибут разрыва страницы, но он все еще делит печать.

Это мой 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; 

} 

}