My goal is to create a div that will occupy the entire A4 page when printing, regardless of whether portrait or landscape mode is selected in the print dialog window.
test.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="test.css" type="text/css"/>
<title>Title</title>
</head>
<body>
<div class="page"></div>
</body>
</html>
test.css
html, body {
padding: 0;
margin: 0;
}
@media print and (orientation: portrait) {
.page {
height: 297mm;
width: 210mm;
background: red;
}
}
@media print and (orientation: landscape) {
.page {
height: 210mm;
width: 297mm;
background: red;
}
}
Expectation: The div should fill 100% of the A4 page in both landscape and portrait modes in the print preview.
Current Issue: The div only occupies 100% of the page in landscape mode. In portrait mode, it takes up about 60% of the page.
If I set height: 420mm;width: 300mm; for portrait mode, it fills the page completely in both modes, but this doesn't seem like the right solution.
When I remove the landscape rule, the div correctly takes up 100% of the page in portrait mode.
I am using Chrome 54.0.2840.100 (64-bit) on Ubuntu 16.04.
Why is the code not working as expected and how can I achieve the desired outcome?
Thank you