web-dev-qa-db-ja.com

CSS印刷レイアウト-1ページに印刷する

私はひどく立ち往生しており、SOアーカイブは私を助けていない。たぶん私は間違った場所を探している。ここに短い話がある：

  • 1ページに印刷する必要があるというビューがあります。 2番目のページを作成することはできません。ページ上でできるだけ大きくする必要があります。
  • ソリューションは、ブラウザ間で合理的に互換性がある必要があります（IE9 +、Safari、Chrome、FF）。
  • すでにPDFソリューションがありますが、プレーンバニラプリントソリューションも必要です。
  • このページはBootstrapで構築されていますが、Printのほとんどのクラスをオーバーライドしました。

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％に設定することが問題だと思いましたが、画像の縦横比がページよりも小さいことを確認しました（マージンがあっても）。基本的に、全幅の画像は改ページの原因になりません。私は何を間違えていますか？何を変更する必要がありますか？任意の助けをいただければ幸いです...

htmlcssprintingcss3stylesheet
24
Nuby

このCSSの詳細に対する不満は、答えを自分のプロジェクトに合わせなければならないことです。 @blahdiblahおよびその他の提案に感謝します。さまざまなソリューションがほぼ完璧な結果をもたらしましたが、もちろんIEはまだ問題を引き起こします...

すべてのパディング/マージンスタイルのハードリセットと、その後の!importantパディング、幅、高さなどのマーカー。基本的に、ページを高さで埋めてから、100％幅のオブジェクトにドロップしました。その結果、8.5x11ページで最大のカバレッジが得られ、2番目のページへのスピルオーバーは発生しません。

@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;}
}
19
Nuby

画像が大きすぎるようです。画像はカスタムサイズなので、設定しないでください

img { height: 100%; }

widthの代わりに？これにより、少なくとも2ページ目には及ばないことが保証されます。

また、プリンタはブラウザよりも変動しやすいことにも留意してください。プリンタの最後の1インチでもスペースを空けることができるかもしれませんが、他の誰かが大幅に異なる印刷マージンを持ち、すべてのハードワークを台無しにする可能性があります。

2
blahdiblah