chrome truncates page contents when in print preview while rest browsers don't

问题

I have found a very weird behavior in Chrome browser (my current version is 54.0.2840.59); when I am trying to print preview a html page that I have developed it truncates the page content, previewing less content than I have. All contents are repetitive so there is no chance that a specific element trigger that issue. From the other hand when I print preview the same page in other browsers such as (IE11, Edge, Firefox, Safari) I see the whole content! Here is my screenshot from Chrome in print preview mode: print preview truncates the rest of the page

At the image you can clearly see the end of scroll in the print preview but there is still a lot of content... Also note that I have tested this in Windows 10, iOs and even in incognito mode in case an addon would do that.

回答1:

I just found a solution. The grid I had created was with bootstrap. There is a case about that here: https://github.com/twbs/bootstrap/issues/12078

I changed the whole grid to display table with !importants, (which solved my case). Though in the community they have changed the bootstrap column grid system in order to match width for print, which this is better solution.

Either way, the problem was that chrome use the XS size of bootstrap layout; hence it miscalculated the page height in my case.

回答2:

Another more proper way to solve this is to use the following sass rules:

@media only print{
   // create grid for .col-md to work without media query
   @include float-grid-columns(md);
   @include loop-grid-columns($grid-columns, md, width);
   @include loop-grid-columns($grid-columns, md, pull);
   @include loop-grid-columns($grid-columns, md, push);
   @include loop-grid-columns($grid-columns, md, offset);
}

With those rules you make bootstrap med columns to be viewed as normal in print.

来源：https://stackoverflow.com/questions/42137928/chrome-truncates-page-contents-when-in-print-preview-while-rest-browsers-dont