浏览器打印边距,默认/无边距,占满1页A4 |
您所在的位置:网站首页 › 打印预览调整页边距 › 浏览器打印边距,默认/无边距,占满1页A4 |
长页面打印的时候,分页是通过给每页内容的外层div设置高度实现的,以达到一页内容刚好占据1页A4纸。 (至少我遇到的情况是这样) 但是,如何设置宽高以及边距,真是个讲究活。 1 设置宽高为210mm*297mm body { margin: 0; } div { width: 210mm; height: 297mm; } div:nth-of-type(1) { background-color: cadetblue; } div:nth-of-type(2) { background-color: blueviolet; }210*297mm是A4纸的尺寸,但是如果加上打印默认的边距,效果就有点不对劲了。 如果这个边距不是必要的,那么可以考虑去掉边距。 @media print { // 媒体查询,打印时样式生效,不用也可以 @page { // 用于在打印文档时修改某些 CSS 属性 margin: 0; } } }或者打印设置里改成无边距(不推荐这种办法,需要客户多干一个步骤,不如设置css直接) 如果一定要边距,那么设置宽高的时候,就把边距减掉。 body { margin: 0; } div { width: 190mm; height: 277mm; } div:nth-of-type(1) { background-color: cadetblue; } div:nth-of-type(2) { background-color: blueviolet; } @media print { @page { margin: 10mm; } }细看其实分页有一丝丝错位,不知道为啥。 以及,既然在css中设置了边距,就不要去调整浏览器打印边距,样式会乱。 设置宽高为a:bpx 在无边距时,这个a:b=210:297就能达到占满a4纸的效果了(其实就是a4纸的比例了) body { margin: 0; } div { width: 1024px; height: 1448px; } div:nth-of-type(1) { background-color: cadetblue; } div:nth-of-type(2) { background-color: blueviolet; } @media print { @page { margin: 0mm; } }1024:1448差不多就是A4纸的比例了。 有边距时,宽高比需要调试。 body { margin: 0; } div { width: 1024px; height: 1471px; } div:nth-of-type(1) { background-color: cadetblue; } div:nth-of-type(2) { background-color: blueviolet; } @media print { @page { margin: 20px; } }1024:1471是调整出来的,我也不知道要怎么算。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |