When I set the size of a parent div to A4 (size="21cm 29.7cm"), I encountered an issue in Chrome's print preview where the HTML page would not fit on A4 without any margins. I had to manually scale it down to 80%.
I was under the impression that using size="21cm 29.7cm" should automatically adjust the page to be A4 size. Is there something in my HTML code that could be causing this discrepancy?
UPDATE: During my research, I came across this helpful resource:
CSS to set A4 paper size
I attempted to use the following CSS code snippet but unfortunately, it did not resolve the issue:
@page {
size: A4;
margin: 0;
}
@media print {
html, body {
width: 210mm;
height: 297mm;
}
}
Below is a glimpse of my HTML structure:
<!Doctype>
<html>
<head>
<style>
.background
{
position: relative;
top: 0;
left: 0;
}
.text
{
position: absolute;
top: 0px;
left: 0px;
width: 1449px;
height: 2050px;
}
</style>
</head>
<body>
<div style="position: relative; left: 0; top: 0;" size="21cm 29.7cm">
<img src='page0022.jpg' class="background"/>
<img src='0022.svg' class="text"/>
</div>
</body>
</html>