I'm working on a resume template using HTML and CSS, and I’m encountering an issue when printing the html page on A4 size paper. When the last page content is smaller than the a4 paper size my html page does not take the remaning height of a4 paper size. See the picture attached.
The content layout works fine on the screen, but when I print it, the last page doesn’t use all the available space on the A4 paper.
The last page should take up all the remaining space of A4 paper, but currently, only the content itself is shown, leaving some blank space below.
My Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
@page {
size: A4;
margin: 20mm;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
@media print {
body {
height: 100%;
}
}
.resume-container {
width: 21cm;
display: flex;
/*this will bring the whole cv in centre of screen*/
margin: 0 auto;
background-color: #fff;
}
.left-panel {
width: 7.24cm;
background-color: var(--left-panel-background-color);
color: #fff;
}
.right-panel {
width: 13.76cm;
background-color: #fff;
}
</style>
<body>
<div class="resume-container">
<div class="left-panel">
<!-- left side content goes here -->
</div>
<div class="right-panel">
<!-- right side content goes here -->
</div>
</div>
</body>
</html>
I'm working on a resume template using HTML and CSS, and I’m encountering an issue when printing the html page on A4 size paper. When the last page content is smaller than the a4 paper size my html page does not take the remaning height of a4 paper size. See the picture attached.
The content layout works fine on the screen, but when I print it, the last page doesn’t use all the available space on the A4 paper.
The last page should take up all the remaining space of A4 paper, but currently, only the content itself is shown, leaving some blank space below.
My Code:
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<style>
@page {
size: A4;
margin: 20mm;
}
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
height: 100%;
}
@media print {
body {
height: 100%;
}
}
.resume-container {
width: 21cm;
display: flex;
/*this will bring the whole cv in centre of screen*/
margin: 0 auto;
background-color: #fff;
}
.left-panel {
width: 7.24cm;
background-color: var(--left-panel-background-color);
color: #fff;
}
.right-panel {
width: 13.76cm;
background-color: #fff;
}
</style>
<body>
<div class="resume-container">
<div class="left-panel">
<!-- left side content goes here -->
</div>
<div class="right-panel">
<!-- right side content goes here -->
</div>
</div>
</body>
</html>
Share
Improve this question
edited Jan 18 at 13:57
DarkBee
15.6k8 gold badges72 silver badges117 bronze badges
asked Jan 18 at 13:38
Ali AsjadAli Asjad
2,0232 gold badges13 silver badges15 bronze badges
1
|
1 Answer
Reset to default 0A variant of Pointy's idea:
If you are willing to tolerate an extra blank page (which you need not print out), you can end your document with a forced page break:
body {
border-left: solid 1em black;
}
div.end {
break-before: page;
}
This is my resume.
<div class="end"></div>
page-break-after
might help, but browser support for print CSS is terrible, not much better than it was 15 years ago. – Pointy Commented Jan 18 at 13:45