Схема печати CSS - печать на одной странице

Я плохо застрял, и архивы 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%, но я убедился, что соотношение сторон изображения меньше, чем страница (даже с любыми полями). В принципе, изображение на полной ширине не должно вызывать разрыв страницы. Что я делаю неправильно и что мне нужно изменить? Любая помощь приветствуется...

Ответ 1

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

Это связано с жестким reset для всех стилей заполнения/поля, а затем большим количеством маркеров !important для заполнения, ширины, высоты и т.д. В основном я заполнил страницу высотой и затем упал на 100% широкие объекты. Результатом является максимальное покрытие на странице 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

Похоже, что ваш образ слишком велик. Поскольку изображение нестандартно, почему бы не установить

img { height: 100%; }

вместо width? Это, по крайней мере, обеспечило бы, что оно не перейдет на вторую страницу.

Помните также, что принтеры более разнообразны, чем браузеры. Вы можете использовать каждый последний дюйм пространства на своем принтере, но кто-то другой может иметь значительно разные границы печати и разрушить всю вашу тяжелую работу.