Alen Alen -4 years ago 176
CSS Question

how to print whole HTML page as A4

I have taken a template from w3-schools

https://www.w3schools.com/w3css/tryit.asp?filename=tryw3css_templates_cv&stacked=h


What I did is that I did some research. And tried this by looking into this

https://stackoverflow.com/questions/3341485/how-to-make-a-html-page-in-a4-paper-size-pages

@page {
size: 7in 9.25in;
margin: 27mm 16mm 27mm 16mm;
}


I inserted a print code and

<script>
$(document).ready(function()
{
window.print();
});
</script>


I got the result this..

current output

But this is not I want. I do not want the extra whitespaces around the divs. It should be printed as an A4 page. What should I do to achieve this?

Output that I want

enter image description here

PS: Before unleashing frustration, I am a pure backend developer. My partner, who is a front-end dev, is sick for days. Sorry and thank you :)

Answer Source

Try tweaking those margin values in the CSS snippet you used. Start from:

@page {
  size: 7in 9.25in;
  margin: 0mm 0mm 0mm 0mm;
}

… and increase those "0mm" values until you're happy, i.e. 1mm, 2mm, etc.

Those 4 values (all currently 0mm in my example) represent the top margin, right margin, bottom margin and left margin of the printed page, in order.

So if you only want to increase the margin from the bottom of the page, you'd change the third 0mm in that line.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download