How to stretch content across the whole page when printing

Question

I have an Angular application, it is just a static site, altough. Is there a way to stretch the content across every started page, when printing the site?

I've set up some attributes for printing, like

@page {
    size: A5;
    margin: 0mm;
    background: var(--background-color);
}

these are working, but the content now is two full A5 sized page, plus a third partial page. However, the background does not stretch across this last page. Can I achieve this somehow?

Edit: I've deleted the angularjs tag and added angular tag instead.

Edit: I'm giving further code samples, it seems, that the problem wasn't described well, enough, sorry about that.

So I have a web page with structured content, which can be scrolled via the body element vertically. Something like this:

<html>
  <!-- The body can be scrolled vertically, because it has overflow-y: auto, and the content is big enough inside of it, that A5 page size it wouldn't fit. -->
  <body>
    <div class="long-content-element">
      This is a long, and structured content, with lots of text and other sub elements.
      Imagine a looooong Lorem Ipsum or something like that.
    </div>
  </body>
</html>

I have a style something like this:

.long-content-element {
  background-color: magenta;
}

When I press the Ctrl + P to start printing, the long content will span across 2 full A5 pages, so the page is fully filled with the magenta background of the div, but it also goes to an other 3rd page, but it isn't stretch to the end of the page, only, let's say 10 lines will go to this 3rd page. BUT the background color doesn't stretch across this page. Only appears behind the first 10 lines which are slipped to this page.

What I want is to have the whole page in the same background as the first two.

Hi I'm not sure exactly what you are printing. But what I do know is that in Javascript if you use the command print(); it brings up googles print screen. So maybe if you were to render your screen you want printed on a screen with nothing but what you want to print.it will give you the results you want to achieve — 13garth, Jun 12 '19 at 10:01

score 0 · Answer 1 · answered Jun 12 '19 at 10:00

0

This might help you - How to make HTML in A4 size pages

You can give fix height of the parent div as of the height of A4 size page.

answered Jun 12 '19 at 10:00

Murtaza Bharmal

472
4
16

Okay, I think I haven't give enough info about the problem. I'll add some more code samples. – monutam91 Jun 12 '19 at 15:15
Yes please try to give detailed requirement. – Murtaza Bharmal Jun 13 '19 at 06:22

How to stretch content across the whole page when printing

1 Answers1