print stylesheet, one page prints and cuts off remaining text
CssPrintingCss Problem Overview
I'm working on a printable list of events, the printer prints one page fine, but cuts off some of the text on the bottom, then it print a second blank page
I've tried everything I know but am at a loss.
Css Solutions
Solution 1 - Css
In print.css, set overflow: visible
instead of overflow: auto
on div#content
. That fixed it for me in Firefox at least. The definition of overflow auto is: "If overflow is clipped, a scroll-bar should be added to see the rest of the content" -- but scroll bars don't exist on printed pages.
I'm guessing that since the content div should span across multiple pages, the browser thinks "you're flowing outside your container and must be clipped with a scroll bar". The container in that case is the first page the content div appears on.
Solution 2 - Css
I know this is an old question but here's another, newer way this can happen.
Check if you're using display: flex;
on the clipped element. It was the problem for me, setting it to block
fixed it.
Solution 3 - Css
I found that setting display: inline
on container divs also helped. Some of these great answers here have worked for me in certain situations while in others no.
<div class="container">
<div class="content-cutting-off-here">
Some long text that gets cut off at the end of the page...
</div>
</div>
Most people set containers to display block
or inline-block
. For me it was cutting off text, and setting it to inline
circumvented that. This also makes width
and height
irrelevant for the offending container div; which I have found to be a nuisance when printing.
@media print {
.container {
display: inline;
}
}
Solution 4 - Css
If any of the containers you're trying to print are floated, they'll get cut-off like you're seeing.
In your print.css, make sure you turn off all the floating that you can without destroying your layout. It's a pain, but browser support for printing is weak at best.
Solution 5 - Css
Are you already using the print
value for the media
attribute for your stylesheet like
<link rel="stylesheet" href="print.css" media="print" />
You might also want to use page-break-before
attributes for elements that you don't want to break.
Solution 6 - Css
I just resolved this problem in ie7. This was in a Sharepoint project, which had various table cells and/or divs set to height:100%. When printed, it would print long forms, the first page or 2 would print as usual, then blank pages instead of the rest.
In my print stylesheet, I set those tables & divs to height: auto, and now it prints fine.
I'm having a different problem in IE8 now. UGH!
Solution 7 - Css
if overflow:visible;
not works, try overflow-y:visible;
(i had body{overflow-y:scroll;}
, and body{overflow:visible;}
in print.css not rewrited it...)
Solution 8 - Css
I fixed the problem by adding overflow:visible;
and give it padding-right: 30px;
to substitute for the scroll bars width.
Solution 9 - Css
I just ran into this issue and have been scouring the internet for a solution that fit my specific needs. In my case I had about 7 tables nested in a larger table. The only way I was able to get the entire web page to print and display in print preview correctly was to use page breaks. Page breaks are CSS properties that allow you to specify and/or force page breaks by attaching the property to block elements.
https://developer.mozilla.org/en-US/docs/Web/CSS/page-break-before
Solution 10 - Css
just setting display: inline solved my same problem.
Reference link I got, https://www.bennadel.com/blog/851-fixing-divs-that-cause-content-truncation-when-printing.htm
Solution 11 - Css
I setup my print sheet to only print the modal content. My fix was to make the modal position: absolute;
. My modal was originally position: fixed;
.
Solution 12 - Css
For me setting overflow:visible;
for body
solved the problem.
body {
overflow: visible;
}
Solution 13 - Css
I've had this issue to. In my case, this was due to an
position: fixed;
Element. I changed this to
@media print{
position: relative;
}
Now I even see new elements that were behind my fixed element, and no cutting off at the bottom anymore.
Solution 14 - Css
for me, the issue was this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1"/>
which putting any value other than 1 for initial scale solves my problem:
<meta name="viewport" content="width=device-width, initial-scale=0.8"/>