浏览器打印 HTML 页面时,底部出现 空白页 的解决办法(原因是body元素自带8px 的margin外边距!!!)_浏览器打印页面 下面空白_倒吃甘蔗的博客-程序员秘密

技术标签: 打印  浏览器    web程序设计  处理  空白  

真是坑死人不偿命 百度就不用说了,我去 stackoverflow 查了半天,没有任何一个人解决了我的办法,后来我自己火眼金睛。。。

鄙人用一个自己写的html 页面 利用浏览器的打印功能 去生成pdf 一直会有多余的一页空白页生成,最后发现原因如标题所述:

body元素自带8px 的margin外边距!!!

body元素自带8px 的margin外边距!!!

body元素自带8px 的margin外边距!!!

然后当你把 html 和 body 的height 都设置为 100% 之后,其实 你的HTML 页面内容已经超出了一页(多了8px!!!)

像这样:

可以看到打印后最后一页空白页到底是怎么来的呢? 

看看这万恶的 8px (红色波浪) 罪魁祸首有木有

 然后解决办法 就简单了,把css 的body{margin:0}   把外边距设置为0即可

效果:

可以看到最后一页后就没有下一个空白页了!!!

因为没有了8px的多余~~~~~~~~

满满的,很贴心~~~~~~ 

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38190111/article/details/88042546

智能推荐

泛微E9 流程 独立选择框对应数据库表 查询_workflow_selectitem_jacoat的博客-程序员秘密

select * from workflow_SelectItem where fieldid=8815 order by selectvalue流程 独立选择框对应数据库表:workflow_SelectItem

CI框架下载安装、项目搭建_Wake_me_Up123的博客-程序员秘密

下载路径https://codeigniter.org.cn/user_guide/installation/downloads.html 在该页面上选择最新版的CI进行下载,然后解压到自己的项目运行文件夹下,加压后的文件如下图: 配置项目域名在本地我的域名为:www1.CI.com。第一次打开时的页面如下: 如上图,这个文件的路径为:application/view/welcome_me

lambda c++_Inuchiyo_chin的博客-程序员秘密

lambda 表达式可以方便地构造匿名函数,如果你的代码里面存在大量的小函数,而这些函数一般只被调用一次,那么不妨将他们重构成 lambda 表达式。C++11 的 lambda 表达式规范如下

CentOs7 安装Docker 并配置代理访问外网_落墨微澜的博客-程序员秘密

环境: Linux version 3.10.0-693.el7.x86_64安装docker的一部分步骤

package.json中dependencies和devDependencies区别_qq_45512210的博客-程序员秘密

package.json中dependencies和devDependencies区别dependencies:应用能够正常运行依赖的包。用户发布环境,依赖的包不仅开发环境能够使用,生产环境也能使用。举例:element-ui,vue等。npm i 【包名】–save/-sdevDependencies:开发应用时能依赖的工具包。只有本地环境开发时,且其生产环境不会被打包入内。有各种工...

心法利器[18] | cqr&ctr:文本匹配的破城长矛_机智的叉烧的博客-程序员秘密

【前沿重器】本栏目主要和大家一起讨论近期自己学习的心得和体会,与大家一起成长。具体介绍:仓颉专项:飞机大炮我都会,利器心法我还有。往期回顾心法利器[13] | 任务方案思考:句子相似度和匹...

随便推点

利用反射方法实现打开“最近任务”_beiminglei的博客-程序员秘密

public void showRecentlyApp() { Class serviceManagerClass; try { serviceManagerClass = Class.forName("android.os.ServiceManager"); Method getService = serviceManagerClass.getMethod("getServi

设置Vue全局公共方法_vue 全局方法_杰~JIE的博客-程序员秘密

1. 怎么设置全局属性;2. 怎么引用全局属性;3 . 原型是什么?4. `__proto__`与`prototype`的区别5. Vue全局公共方法优化

TouchGFX界面开发 | C++基础_安迪西的博客-程序员秘密

TouchGFX是一个基于STM32硬件,由C++写成的软件框架,所以有必要对C++基础有一定的了解

函数调用做为左值_写一个能做左值的函数_半个馒头的博客-程序员秘密

返回一个引用,使得一个函数调用表达式成为左值表达式。只要避免将局部变量的地址返回,就能使函数调用表达式作为左值来使用,运行的很好。example:统计学生中A类学生与B类学生各占多少。A类学生的标准时平均分在80分以上,其余都是B类学生,先看不返回引用的情况:代码:#include using namespace std;int array[6][4] = {

ArchLinux无线自动联网_baigang1986的博客-程序员秘密

这条命令将创建并启用一个随计算机启动而自动运行的 systemd 服务。# netctl enable profile #profile是你是无线配置文件,如果你用wifi-menu联网成功后在你的/etc/netctl/ 文件夹下会生成这个配置文件。转载于:https://www.cnblogs.com/mc-r/p/11291818.html...

推荐文章

热门文章

相关标签