[英]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.