[英]How do i align footer and header at with minimal height when printing a page using html and css?
我正在嘗試做的是創建像Magzine這樣的布局。 我在HTML使用CSS Grid創建布局，無論如何，當我渲染或在瀏覽器中打開布局時，布局看起來都不錯，但是當我按Ctrl + P進行打印時， Header和Footer變得失真了，我想要的是就像它們出現在中間，在Header和Footer都有一些填充
如您所見，頁腳向左移動， body文本和header彼此折疊。 頁腳也是如此。
* { box-sizing: border-box; -moz-box-sizing: border-box; } body { width: 21cm; min-height: 29.7cm; padding: 1cm; margin: 1cm auto; border-radius: 5px; background: white; font-size: 14px; font-family: 'Droid Serif', serif; } header, footer { text-align: center; padding: 10px; } h1{ margin: 0 auto; } .container { display: grid; grid-template-columns: repeat(auto-fit, minmax(12, 1fr)); grid-gap: 1em; grid-auto-rows: minmax(auto-fill, auto); grid-template-areas: "hhhhhhhhhhhh" "mmmccccccccc" "llllllrrrrrr"; } .container>div { column-count: 2; } p::first-letter { font-style: italic; font-weight: bold; font-size: 40px; } h2 { text-align: center; font-style: italic; font-weight: bold; column-span: all; } .container>.item_LayoutOne_100Percent { grid-area: h; } .container>.item_LayoutTwo_50Percent_layoutOne { grid-area: l; } .container>.item_LayoutTwo_50Percent_layoutTwo { grid-area: r; } .container>.item_LayoutThree_75Percent { grid-column: c; } .container>.item_LayoutFour_25Percent { grid-column: m; } h1{ margin-left: auto; margin-right: auto; text-align: center; } @page { size: A4; margin: 11mm 17mm 17mm 17mm; } @media print { footer { position: fixed; bottom: 0; margin:-10px; } header { position: fixed; top: 0; } p { page-break-inside: avoid; } html, body { width: 210mm; height: 297mm; } }
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>Magzine Design</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- <script src="main.js"></script> --> </head> <body> <header> <h1>Some Content Name</h1> </header> <div class="container"> <div class="content-block item_LayoutOne_100Percent"> <h2>Demo Heading for 100% Layout</h2> It was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits </div> <div class="content-block item_LayoutTwo_50Percent_layoutOne"> <h2>Demo Heading for 50% Layout</h2> it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits </div> <div class="content-block item_LayoutTwo_50Percent_layoutTwo"> <h2>Demo Heading for 50% Layout</h2> it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits began </div> <div class="content-block item_LayoutFour_25Percent"> <h2>Demo Heading for 25% Layout</h2> it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits began </div> <div class="content-block item_LayoutThree_75Percent"> <h2>Demo Heading for 75% Layout</h2> it was this, as much as anything, that gave people courage, and I suppose the new arrivals from Woking also helped to restore confidence. At any rate, as the dusk came on a slow, intermittent movement upon the sand pits began </div> </div> <footer> Some Content Name </footer> </body> </html>
這是我的代碼段，如果我在某個地方做錯了，請幫幫我，我嘗試了@print上的許多方法，例如為頁眉和頁腳提供了padding或margin ，但沒有任何效果。
這是我在@media print {}中更新的解決方案
footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
margin:-10px;
margin-left: auto;
margin-right: auto;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
margin: auto;
}
我在項目中多次使用了此代碼，這是受此SO答案啟發的。 如果將left和right都指定為0可以使用auto margin將<body>的元素居中。
在多頁上打印時，如何使HTML表格頁腳占據每頁上的可用空間？
[英]How can I make HTML table footer take available space on each page when printing on multiple pages?
如何使用 CSS 對齊頁腳 div 中包含的多個 div？
[英]How do I align multiple divs contained within a footer div using CSS?
使用Javascript或CSS從Internet Explorer打印時隱藏頁眉和頁腳
[英]Hide header and footer when printing from Internet Explorer using Javascript or CSS
使用 css 和固定 header 和頁腳的可變內容 div 高度
[英]Variable content div height using css with fixed header and footer
當我的 html 頁面中的內容較少時，如何將頁腳粘貼到底部
[英]How do I stick my footer to the bottom when there is less content in my html page
HTML，當內容達到一定高度時如何制作可重復的頁眉和頁腳？
[英]HTML, How to make repeatable header and footer when content reaches certain height?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.