2011-12-01 35 views
19

私はひどく立ち往生していますし、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%に設定することが問題だと思っていましたが、イメージのアスペクト比がページよりも小さいことを確認しました。基本的に、全幅の画像は改ページを起こさないはずです。何が間違っているのですか&何を変更する必要がありますか?どんな助けもありがたいです...

+1

私はダイアグラムがあなたの問題を視覚化するのに役立つと思います。私はこの時点で何が問題なのかよく分かりません。 –

+0

私は、合併症を追加せずに何を描くことができるのか分かりません。それはその中にイメージがある8.5 "x11"の紙です。画像を100%幅にすると、余分な空白のページ(ChromeとFireFox)を作成せずに印刷することはできません。 – Nuby

+0

95%のように設定してみてください。 1ページに収まるまで値を試してみてください。すべての余白やパディングを削除することもできます(たとえば、「* {パディング:0;マージン:0}」)。また、ブラウザはヘッダーとフッターを印刷するので、使用可能なスペースの比率は空白のページの比率と同じではありません。 – Gerben

答えて

18

私は、CSSのこの詳細についての不満は、自分のプロジェクトに合わせて答えを出さなければならないということです。 @ blahdiblahと他の提案に感謝します。ソリューションが混在するとほぼ完璧な結果が得られましたが、もちろんIEは問題を抱えています...

すべてのパディング/マージンスタイルをハードリセットした後、埋め込みの幅が広い!importantマーカ基本的に、ページを高さで埋めて、100%幅のオブジェクトにドロップしました。結果は、2番目のページへのスピルオーバーがゼロの8.5x11ページでの最大カバレッジです。

@media print { 
    * { margin: 0 !important; padding: 0 !important; } 
    #controls, .footer, .footerarea{ display: none; } 
    html, body { 
    /*changing width to 100% causes huge overflow and wrap*/ 
    height:100%; 
    overflow: hidden; 
    background: #FFF; 
    font-size: 9.5pt; 
    } 

    .template { width: auto; left:0; top:0; } 
    img { width:100%; } 
    li { margin: 0 0 10px 20px !important;} 
} 
2

あなたのイメージがちょうど大きすぎるように聞こえます。イメージはカスタムサイズであるため、設定しない理由はwidthの代わりに

img { height: 100%; } 

のいずれかですか?それは少なくともそれが2ページ目にこぼれなかったことを少なくとも保証します。

プリンタはブラウザよりも可変であることにも注意してください。あなたはプリンタのスペースの最後の1インチを作り出すことができるかもしれませんが、他の人の印刷マージンが大きく異なることがあります。

+0

私はこれを試しました。私は最近の試みを再投稿します。 HTMLとBODYをwidth:100%に設定すると、ページよりも幅が広がるため、私はまだ狂っている。それは変だと思う。高さはファンキーなものもありましたが、おそらくこれが最善の方法です。 – Nuby