Take a look at this basic 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 try copying and pasting it to see for yourself.
The issue I'm facing is that when I use the print-preview option in Google Chrome, the "page" element extends beyond the first page.
It's odd because A4 dimensions are supposed to be 210mm x 297mm.
Does anyone happen to know why this is happening?
(By the way, I'm on the lookout for a comprehensive tutorial on CSS printing techniques)
Note : Google Chrome Version 41.0.2272.118 m