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

Question

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

Answer 1

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

Это связано с жестким сбросом всех стилей заполнения/поля, а затем много маркеров !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;} 
} 

Answer 2

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

img { height: 100%; } 

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

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