html – CSS打印布局 – 单页打印

概述我被卡住了,SO档案没有帮助我.也许我在错误的地方看.这是一个简短的故事： >我有一个看法,我需要打印在一个完整的页面.我不能有第二页,我需要它在页面上尽可能大. >解决方案必须具有合理的跨浏览器兼容性(IE9,Safari,Chrome,FF). >我已经有一个PDF解决方案,但是我也需要一个简单的香草打印解决方案. >该页面是使用Bootstrap构建的,但是我已经覆盖了Print的大部分类. 我被卡住了,SO档案没有帮助我.也许我在错误的地方看.这是一个简短的故事：

>我有一个看法,我需要打印在一个完整的页面.我不能有第二页,我需要它在页面上尽可能大.
>解决方案必须具有合理的跨浏览器兼容性(IE9,Safari,Chrome,FF).
>我已经有一个pdf解决方案,但是我也需要一个简单的香草打印解决方案.
>该页面是使用bootstrap构建的,但是我已经覆盖了Print的大部分类.

HTML页面的结构如下.我删除了一些内联CSS,以定制一些这样的信息.

<div >  <div >    <div >      <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 >        <div >          <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％是问题,但我确保图像宽高比小于页面(即使有任何边距).基本上,全宽度的图像不应该导致分页符.我做错了什么我需要改变什么？任何帮助是赞赏…

解决方法 我认为CSS的这个细节的沮丧是,答案必须适合我自己的项目.感谢@blahdiblah等提出建议.混合的解决方案导致近乎完美的结果,虽然IE仍然给我问题…

它与所有填充/边距样式的硬重置,然后很多重要的标记填充,宽度,高度等.基本上,我填充页面与高度,然后放在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;}}

总结

以上是内存溢出为你收集整理的html – CSS打印布局 – 单页打印全部内容，希望文章能够帮你解决html – CSS打印布局 – 单页打印所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。