残りのブラウザが表示されないうちに、印刷プレビュー時にクロムがページ内容を切り捨てます

Question

Chromeブラウザで非常に奇妙な動作が検出されました（現在のバージョンは54.0.2840.59）。私が開発したhtmlページを印刷プレビューしようとすると、ページコンテンツが切り捨てられ、私が持っているよりも少ないコンテンツがプレビューされます。すべての内容は繰り返しですので、特定の要素がその問題を引き起こす可能性はありません。一方、（IE11、Edge、Firefox、Safariなどの）他のブラウザで同じページをプレビューすると、コンテンツ全体が表示されます。ここでは、印刷プレビューモードでChromeからの私のスクリーンショットです：あなたが印刷プレビューでスクロールの終わりをはっきり見ることができますが、コンテンツの多くがまだある画像で print preview truncates the rest of the page

が... はまた、私がテストしていることに注意してくださいこれはWindows 10、iOs、さらにはアドオンがそれを行う場合のシークレットモードでさえあります。

Answer 1

解決策が見つかりました。私が作成したグリッドは、ブートストラップを使っていました。 その程度の場合はここにあります： https://github.com/twbs/bootstrap/issues/12078

私は（私の場合を解く）importants、とテーブルを表示するには、グリッド全体を変えました！。コミュニティでは、印刷の幅に合わせるためにブートストラップカラムグリッドシステムを変更しましたが、これはより良い解決策です。いずれにしても、クロームはXSサイズのブートストラップレイアウトを使用することが問題でした。私の場合はページの高さを誤って計算しました。あなたは、印刷中に通常通り見ることがMED列をブートストラップ作り、それらのルールで

@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); 
} 

：

Answer 2

これを解決するための別のより適切な方法は、以下のSASSのルールを使用することです。