網頁列印出現header 和 body中資料重疊

print css page-break

Leo 2022-06-17 11:43:59 ‧ 857 瀏覽

分享至

我這邊在列印網頁時，遇到header 和 body中資料重疊問題

第一頁顯示一切正常
灰底(header)能夠顯示在最上面
表單的資料如期接續顯示
只是表單的資料比較多
所以跑到了第二頁
而灰底似乎是header的關係導致每頁都會出現

然而在第二頁，header卻壓住了表單(如上圖)
這邊有做了一些功課，試圖使用page-break-inside: avoid、margin-top: 200px 來進行表單與灰底之間的區隔
只是效果不如預期會分開...
然而margin-top在表單未起作用，然而灰底卻起了作用了
嘗試好一陣子後真不曉得該如何調整..

這邊主要是想讓灰底與表單分開，試過很多方式最終卻徒勞..
想請教有沒有大大能夠給予指教!! 感激不盡!!

harry xie iT邦研究生 1 級 ‧ 2022-06-17 17:29:44 檢舉

選錯地方

登入發表討論

直播研討會

{{ item.channelVendor }} {{ item.webinarstarted }} |

直播中

1 個回答

harry xie

iT邦研究生 1 級 ‧ 2022-06-17 17:30:11

以我個人來說，單看描述，沒有程式碼，有點難解決問題，不知道您內部程式碼怎麼寫的
可以試試用 @media print 去設定列印時 header 的 css style
https://kakadodo.github.io/2018/03/13/css-media-print-setting/

回應 1
分享
檢舉

Leo iT邦新手 5 級 ‧ 2022-06-23 08:55:04 檢舉

不好意思，第一次貼這樣的文章求助，原來要貼程式碼會比較好，謝謝你。

至於我遇到的問題，後來用下面程式碼解決掉了！
讓header只呈現在第一頁，第二頁無顯示header，也不會佔到第二頁表單畫面。

@media print {
  header {
    position: static;
  }
}

登入發表回應

我要發表回答

立即登入回答

參賽組數

1123 組

團體組數

52 組

累計文章數

23096 篇

完賽人數

656 人

15th鐵人賽 13th鐵人賽 14th鐵人賽 12th鐵人賽 11th鐵人賽鐵人賽 2019鐵人賽 2018鐵人賽 javascript 2017鐵人賽 python windows php c# windows server linux css 程式設計 react vue.js

IT邦幫忙