天天看點

浏覽器列印 HTML 頁面時,底部出現 空白頁 的解決辦法(原因是body元素自帶8px 的margin外邊距!!!)

真是坑死人不償命 百度就不用說了,我去 stackoverflow 查了半天,沒有任何一個人解決了我的辦法,後來我自己火眼金睛。。。

鄙人用一個自己寫的html 頁面 利用浏覽器的列印功能 去生成pdf 一直會有多餘的一頁空白頁生成,最後發現原因如标題所述:

body元素自帶8px 的margin外邊距!!!

body元素自帶8px 的margin外邊距!!!

body元素自帶8px 的margin外邊距!!!

然後當你把 html 和 body 的height 都設定為 100% 之後,其實 你的HTML 頁面内容已經超出了一頁(多了8px!!!)

像這樣:

浏覽器列印 HTML 頁面時,底部出現 空白頁 的解決辦法(原因是body元素自帶8px 的margin外邊距!!!)

可以看到列印後最後一頁空白頁到底是怎麼來的呢? 

看看這萬惡的 8px (紅色波浪) 罪魁禍首有木有

浏覽器列印 HTML 頁面時,底部出現 空白頁 的解決辦法(原因是body元素自帶8px 的margin外邊距!!!)

 然後解決辦法 就簡單了,把css 的body{margin:0}   把外邊距設定為0即可

效果:

浏覽器列印 HTML 頁面時,底部出現 空白頁 的解決辦法(原因是body元素自帶8px 的margin外邊距!!!)

可以看到最後一頁後就沒有下一個空白頁了!!!

因為沒有了8px的多餘~~~~~~~~

浏覽器列印 HTML 頁面時,底部出現 空白頁 的解決辦法(原因是body元素自帶8px 的margin外邊距!!!)

滿滿的,很貼心~~~~~~