I'm using a CSS property,
If I use page-break-after: always; => It prints an extra blank page before
If I use page-break-before: always; => It prints an extra blank page after. How to avoid this?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
.print{
page-break-after: always;
}
</style>
<script type="text/javascript">
window.print();
</script>
</head>
<body>
<div class="print">fd</div>
<div class="print">fdfd</div>
</body>
</html>
After struggling with various page-break settings and heights and a million various CSS rules on the body tag, I finally solved it over a year later.
I have a div which is supposed to be the only thing on the page which prints, but I was getting several blank pages after it.
My body tag is set to visibility:hidden; but that wasn't enough. Vertically tall page elements still take up 'space'. So I added this in my print CSS rules:
#header, #menu, #sidebar{ height:1px; display:none;}
to target specific divs by their ids which contain tall page layout elements. I shrunk the height and then removed them from the layout. No more blank pages. Years later I'm happy to tell my client I cracked it. Hope this helps someone.
Seems there's a lot of possible causes, with the likely theme being that the body tag ends up with a height that is considered too large for w/e reason.
My cause: min-height: 100% in a base stylesheet.
My solution: min-height: auto in a @media print directive.
Note, auto didn't seem to be a correct value, according to PhpStorm. However, it is correct according to Mozilla's documentation on min-height:
auto
The default minimum size for flex items, providing a more reasonable default than 0 for other layouts.
In my case setting width to all divs helped:
.page-content div {
width: auto !important;
max-width: 99%;
}
Check if there is any white space after the html tag at the bottom. Remove any whitespace below helped me
.print:last-child{
page-break-after: avoid;
page-break-inside: avoid;
margin-bottom: 0px;
}
This worked for me.
If you just wanna use CSS and wanna avoid page break then use
.print{
page-break-after: avoid;
}
Take a look at paged media
You can use scripting equivalents for pageBreakBefore and pageBreakAfter,dynamically assign their values. For example, instead of forcing custom page breaks on your visitors, you can create a script to make this optional. Here I'll create a checkbox that toggles between slicing the page at the headers (h2) and at the printer's own discretion (default):
<form name="myform">
<input type="checkbox" name="mybox" onClick="breakeveryheader()">
</form>
<script type="text/javascript">
function breakeveryheader(){
var thestyle=(document.forms.myform.mybox.checked)? "always" : "auto"
for (i=0; i<document.getElementsByTagName("H2").length; i++)
document.getElementsByTagName("H2")[i].style.pageBreakBefore=thestyle
}
Click here for an example that uses this. You can substitute H2 inside the script with another tag such a P or DIV.
if None of those works, try this
@media print {
html, body {
height:100vh;
margin: 0 !important;
padding: 0 !important;
overflow: hidden;
}
}
make sure it is 100vh
I just encountered a case where changing from
</div>
<script src="addressofjavascriptfile.js"></script>
</body>
</html>
to
<script src="addressofjavascriptfile.js"></script>
</div>
</body>
</html>
fixed this problem.
I changed css display and width property of print area
#printArea{_x000D_
display:table;_x000D_
width:100%;_x000D_
}Don't know (as for now) why, but this one helped:
@media print {
html, body {
border: 1px solid white;
height: 99%;
page-break-after: avoid;
page-break-before: avoid;
}
}
Hope someone will save his hair while fighting with the problem... ;)
I tryed all solutions, this works for me:
<style>
@page {
size: A4;
margin: 1cm;
}
.print {
display: none;
}
@media print {
div.fix-break-print-page {
page-break-inside: avoid;
}
.print {
display: block;
}
}
.print:last-child {
page-break-after: auto;
}
</style>
Have you tried this?
@media print {
html, body {
height: 99%;
}
}
set display:none for all other elements which are not for prints.
setting visibility:hidden will keep them hidden, but they all are still there and have taken space for them. empty page is for those hidden elements.
Chrome seems to have a bug where in certain situations, hiding elements post-load with display:none, leaves a lot of extra space behind. I would guess they are calculating document height before the document is done rendering. Chrome also fires 2 media change events, and doesn't support onbeforeprint, etc. They are basically being the ie of printing. Here's my workaround:
@media print {
body {
display: none;
}
}
body.printing {
display: block;
}
You give body class="printing" on doc ready, and that enables the print styles. This system allows for modularization of print styles, and in-browser print preview.
First, emulate the print stylesheet via your browser's devtools. Instructions can be found here.
Then you'll want to look for extra padding, margin, borders, etc that could be extending the dimensions of your pages beyond the 8.5in x 11in. Pay special attention to whitespace as this will be impossible to detect via the print preview dialog. If there is whitespace that shouldn't be there, right-clicking and inspecting the element under the cursor should highlight the issue (unless it's a margin causing it).
Put the stuff you need on a page in a div and use page-break-inside:avoid on that div. Your div will stay on one page and go onto a second or third page if needed, but the next div, should it have to do a page break, should start on the next page.
This works for me
.print+.print {
page-break-before: always;
}
Solution described here helped me (webarchive link).
First of all, you can add border to all elements to see what causes a new page to be appended (maybe some margins, paddings, etc).
div { border: 1px solid black;}
And the solution itself was to add the following styles:
html, body { height: auto; }
Add this css to same page to extend css file.
<style type="text/css">
<!--
html, body {
height: 95%;
margin: 0 0 0 0;
}
-->
</style>
None of the answers worked with me, but after reading all of them, I figured out what was the issue in my case I have 1 Html page that I want to print but it was printing with it an extra white blank page. I am using AdminLTE a bootstrap 3 theme for the page of the report to print and in it the footer tag I wanted to place this text to the bottom right of the page:
Printed by Mr. Someone
I used jquery to put that text instead of the previous "Copy Rights" footer with
$("footer").html("Printed by Mr. Someone");
and by default in the theme the tag footer uses the class .main-footer which has the attributes
padding: 15px;
border-top: 1px solid
that caused an extra white space, so after knowing the issue, I had different options, and the best option was to use
$( "footer" ).removeClass( "main-footer" );
Just in that specific page
I had a similar issue but the cause was because I had 40px of margin at the bottom of the page, so the very last row would always wrap even if there were room for it on the last page. Not because of any kind of page-break-* css command. I fixed by removing the margin on print and it worked fine. Just wanted to add my solution in case someone else has something similar!
The extra page problem in my case was caused by table element on the page. I tried many of the solutions offered here, but to solve the problem I had to change the table css to:
table {
width: 99%;
height: 99%;
}
Strangely setting a transparent border solved this for me:
@media print {
div {
border: 1px solid rgba(0,0,0,0)
}
}
Maybe it will suffice to set the border on the container element. <- Untestet.
Source: Stackoverflow.com