CSS Print Layout - печать на одной странице

Question

CSS Print Layout - печать на одной странице

Я сильно застрял, и архивы SO мне не помогают. Может я не там ищу? Вот краткая история:

У меня есть вид, который мне нужно напечатать на одной полной странице. Я не могу иметь вторую страницу, и мне нужно, чтобы она была как можно больше на странице.
Решение должно быть достаточно кроссбраузерным (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, которые появились до него по разным причинам. Я мог бы повторить это, но суть в следующем. Когда я печатаю, я получаю то, что выглядит правильно, плюс дополнительную вторую страницу. Когда я уменьшаю изображение, все в порядке, но мне нужно, чтобы изображение заполняло DIV.

Я думал, что проблема в установке ширины 100%, но я убедился, что соотношение сторон изображения меньше, чем страница (даже с любыми полями). В принципе, изображение во всю ширину не должно вызывать разрыв страницы. Что я делаю неправильно и что мне нужно изменить? Любая помощь будет принята с благодарностью...

24

html css printing css3 stylesheet

задан Nuby 1 December 2011 в 17:45

1 ответ

Другие вопросы по тегам:

html css printing css3 stylesheet

Похожие вопросы:

score 19 · Accepted Answer

Я думаю, что разочарование этой деталью CSS заключается в том, что ответ должен быть адаптирован к моему собственному проекту. Спасибо @blahdiblah и другим за предложения. Совокупность решений привела к почти идеальным результатам, хотя, конечно, IE все еще доставляет мне проблемы ...

Это было связано с жестким сбросом всех стилей отступов / полей, а затем с множеством маркеров !important для отступов, ширины, высоты и т. Д. В основном я заполнил страницу высотой, а затем уронил объекты шириной 100%. , Результатом является максимальный охват на странице 8,5х11 с нулевым вторичным эффектом на вторую страницу.

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