javascript - How to make the last page fill the entire A4 paper when printed?

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>

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 Asjad 2,0232 gold badges13 silver badges15 bronze badges

Continuous media (printing) is not like the screen. You might see if a 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

Add a comment |

1 Answer 1

Sorted by: Reset to default 0

A 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>

科技改变生活-雨落星辰 - 所有的伟大,都源于一个勇敢的开始

javascript - How to make the last page fill the entire A4 paper when printed? - Stack Overflow

1 Answer 1

与本文相关的文章

评论列表(0)