Menu
Here is a simple HTML code :
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<style type="text/css">
.page {
width: 200px;
height: 500px;
background: #DD5555;
}
@page {
size: A4;
margin: 0;
}
@media print {
body {
margin: 0;
}
.page {
width: 210mm;
height: 297mm;
}
}
</style>
</head>
<body>
<div class="page">This is a test page</div>
</body>
</html>
You can copy/paste it to check.
My problem is : When I try the print-preview in Google Chrome the "page" element overflow the first page.
This is strange because A4 dimensions are 210*297mm
Does someone know why ?
(BTW: I'm looking for some good and complete tutorial about CSS printing techniques)
Note : Google Chrome Version 41.0.2272.118 m
989
It seems to be a bug, but I can be solved by replacing height: 297mm; with height: 296.994mm;. (The difference in other browser should not be visible)
72
Try forcing setting the paper size in mm. Issue has gone for me:
@media print {
@page {
size: 210mm 297mm;
margin: 0;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
