私はひどく立ち往生していますし、SOのアーカイブは私を助けていません。たぶん私は間違った場所を探しています。短編小説は次のとおりです:CSSの印刷レイアウト - 単一のページで印刷
- 私は単一のフルページに印刷する必要があるという見解を持っています。私は2ページ目を持つことができず、ページ上にできるだけ大きくする必要があります。
- 解決策はブラウザ間で合理的に互換性がなければなりません(IE9 +、Safari、Chrome、FF)。
- 私はすでにPDFソリューションを持っていますが、プレーンなバニラ印刷ソリューションも必要です。
- ページにはブートストラップが組み込まれていますが、プリントのクラスのほとんどをオーバーライドしました。
HTMLページの構造は次のとおりです。この情報の一部をカスタマイズするために、いくつかのインラインCSSを削除しました。
<div class="container">
<div class="row">
<div class="span16">
<style type="text/css" media="all">
@media print {
html, body {
margin: 0;
padding: 0;
background: #FFF;
font-size: 9.5pt;
}
.container, .container div {
width: 100%;
margin: 0;
padding: 0;
}
.template { overflow: hidden; }
img { width: 100%; }
}
</style>
<div class="template_holder">
<div class="template">
<img src="some_big_image">
<div>
[PLAIN TEXT IN HERE, POSITION:ABSOLUTE OVER THE IMAGE]
</div>
</div>
</div>
</div>
</div>
</div>
私はそれがここにインラインCSSを含めるようにやや貧弱な形だ実現するが、それは様々な理由のためにそれの前に来た他のCSSの束を上書きする必要があります。私はそれを取り戻すことができましたが、それの要点はこれです。私が印刷すると、正しいものと2番目の余分なページが表示されます。私が画像を縮小すると、すべては問題ありませんが、DIVを埋めるために画像が必要です。
私は幅を100%に設定することが問題だと思っていましたが、イメージのアスペクト比がページよりも小さいことを確認しました。基本的に、全幅の画像は改ページを起こさないはずです。何が間違っているのですか&何を変更する必要がありますか?どんな助けもありがたいです...
私はダイアグラムがあなたの問題を視覚化するのに役立つと思います。私はこの時点で何が問題なのかよく分かりません。 –
私は、合併症を追加せずに何を描くことができるのか分かりません。それはその中にイメージがある8.5 "x11"の紙です。画像を100%幅にすると、余分な空白のページ(ChromeとFireFox)を作成せずに印刷することはできません。 – Nuby
95%のように設定してみてください。 1ページに収まるまで値を試してみてください。すべての余白やパディングを削除することもできます(たとえば、「* {パディング:0;マージン:0}」)。また、ブラウザはヘッダーとフッターを印刷するので、使用可能なスペースの比率は空白のページの比率と同じではありません。 – Gerben