print stylesheet, one page prints and cuts off remaining text

Question

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 tr

Answer 1

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.

Answer 2

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.

Answer 3

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.

Answer 4

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!

Answer 5

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

Answer 6

I fixed the problem by adding overflow:visible; and give it padding-right: 30px; to substitute for the scroll bars width.