最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

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

programmeradmin1浏览0评论

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

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>

发布评论

评论列表(0)

  1. 暂无评论