CSS打印布局 - 在单页上打印 [英] CSS Print Layout - Printing on a Single Page

查看:159
本文介绍了CSS打印布局 - 在单页上打印的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我被严重困扰,SO档案没有帮助我。也许我在错误的地方看。这里是短篇小说:

I'm badly stuck and the SO archives aren't helping me. Maybe I'm looking in the wrong place. Here's the short story:


  • 我有一个视图,我需要在一个完整的页面上打印。我不能有第二页,我需要它在页面上尽可能大。

  • 解决方案必须符合跨浏览器兼容性(IE9 +,Safari,Chrome,FF)。

  • 我已经有一个PDF解决方案,

HTML页面的结构如下。我放弃了一些内嵌的CSS,以自定义一些这些信息。

The structure of the HTML page is as follows. I dropped in some in-line CSS in order to customize some of this information.

<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。

I realize it's somewhat poor form to include in-line CSS here, but it has to override a bunch of other CSS that came before it for various reasons. I could pull it back out, but the gist of it is this. When I print, I get something that looks right, plus an extra second page. When I shrink the image down, everything is ok, but I need the image to fill the DIV.

我认为设置宽度为100%是问题,但我确保图像长宽比小于页面(即使有任何边距)。基本上,全宽度的图像不应该导致分页。我做错了什么我需要改变什么?任何帮助是赞赏...

I thought setting width to 100% was the issue, but I made sure the image aspect ratio was smaller than the page (even with any margins). Basically, the image at full width should not cause a page break. What am I doing wrong & what do I need to change? Any help is appreciated...

推荐答案

我认为CSS的这个细节的沮丧是,我自己的项目。感谢@blahdiblah和其他建议。混合的解决方案导致接近完美的结果,虽然当然IE仍然给我的问题...

I think the frustration with this detail of CSS is that the answer has to be tailored to my own project. Thanks to @blahdiblah and other for suggestions. A mix of solutions led to near-perfect results, though of course IE still gives me problems...

它与所有padding / margin的硬重置样式,然后很多!重要 padding,width,height等标记。基本上,我填充页面的高度,然后放在100%宽的对象。结果是在8.5x11页面上的最大覆盖率,第二页为零溢出。

It had to do with a hard reset of all padding/margin styles and then lots of !important markers for padding, width, height, etc. Basically I filled up the page with height and then dropped in 100% wide objects. The result is maximum coverage on an 8.5x11 page with zero spillover to a second page.

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

这篇关于CSS打印布局 - 在单页上打印的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆