是否要为具有可变大小内容的HTML页面打印页眉和页脚？
当前的问题是页眉和页脚与内容重叠。由于它们是“固定的”，因此我无法使用流程来防止重叠。
我尝试了较高的页边距（4厘米），且顶部/底部值为负。标头只是转到上一页并重叠内容。
我已经尝试过表格，但是td内的布局选项是有限的（列数不能按预期工作），最后一个表格页脚放在内容的末尾，而不是页面的底部。
浏览器特定的解决方案还可以。
这是我当前的代码。页面尺寸为A4（21.0 x 29.7cm）。
<!doctype HTML>
<html>
<head>
<style>
@page {
margin: 1cm 1cm 1cm 1cm;
}
html {
padding: 0; margin: 0;
overflow: visible;
}
body {
outline: 1px solid red;
padding: 0; margin: 0;
overflow: visible;
}
article {
padding: 0; margin: 0;
}
p {
float: left;
column-count: 2;
font-size: 14pt;
page-break-inside: avoid;
padding: 1em; margin: 0;
}
p:nth-child(odd) {
color: gray;
}
header {
width: 19cm;
height: 3cm;
outline: 3px solid blue;
position: fixed;
top: 0cm;
}
footer {
width: 19cm;
height: 3cm;
outline: 3px solid green;
position: fixed;
bottom: 0cm;
}
</style>
</head>
<body>
<header>HEADER</header>
<footer>FOOTER</footer>
<article>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut sollicitudin nec elit vitae lacinia. Duis dignissim in orci et feugiat. Pellentesque sodales lectus et elit fringilla, et suscipit sapien rutrum. Vestibulum nec ante sagittis, iaculis risus vel, mattis orci. Aliquam ut enim purus. Nunc ac mauris sem. Morbi faucibus diam vel nunc convallis aliquet. Aenean sed lectus mi. Suspendisse potenti. Sed placerat volutpat enim. Praesent dignissim tempor dui. Nullam iaculis magna at tincidunt tincidunt.</p>
<p>Aliquam non libero fringilla, porta lorem nec, pellentesque dolor. Aenean vel turpis vitae ligula commodo viverra. Curabitur sagittis, magna id laoreet varius, ipsum orci malesuada turpis, ac blandit est tellus in lectus. Quisque rhoncus elit et neque ultrices, vitae eleifend nisi fringilla. Proin id elementum leo. Praesent sed sem luctus, euismod nisi id, lobortis urna. Etiam a vulputate orci, a laoreet felis. Nunc aliquet condimentum ante, vulputate vestibulum tellus lacinia sit amet.</p>
<p>Vestibulum viverra a mi vel commodo. Aenean pretium laoreet tortor, vel euismod metus fringilla id. Vestibulum sit amet metus dolor. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vestibulum aliquam tortor sed neque pellentesque luctus. Donec at nisi lectus. Morbi in rhoncus dolor. Cras tincidunt felis et rutrum hendrerit. Cras et nulla vitae magna vulputate porttitor. Morbi posuere, quam eu scelerisque egestas, neque justo tempus neque, ornare tristique mi metus sit amet leo. Vestibulum ac pharetra tellus.</p>
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nulla imperdiet magna ac ligula congue, id tempus ligula convallis. Fusce suscipit ullamcorper arcu ac vestibulum. In consequat sem felis, vitae scelerisque arcu porta at. Nullam dictum sem eget hendrerit mollis. Cras in pretium quam. Aliquam ornare, metus sodales sodales tristique, neque arcu facilisis sapien, a malesuada tellus nisl vitae dolor. Etiam vel metus libero. Nulla ullamcorper congue libero, in venenatis erat vulputate a. Vivamus porttitor nulla eget odio finibus scelerisque non eu lorem. Aliquam ornare dui id mi auctor sollicitudin. Duis aliquam, erat id aliquet sodales, erat mauris porta ante, eu elementum nisi ipsum sit amet justo. Integer at lobortis mi.</p>
<p>Proin iaculis ut justo a fermentum. Pellentesque consectetur eget lacus eget facilisis. Pellentesque pellentesque vitae libero ullamcorper fringilla. Sed fringilla neque in vulputate sagittis. Curabitur sit amet dolor at lorem auctor congue ut a mauris. Pellentesque dapibus dui porttitor dictum venenatis. Curabitur lacus dolor, volutpat non libero a, convallis efficitur mi. Nullam ornare non tortor at tincidunt. Aenean ac justo massa.</p>
<p>Ut dolor justo, vehicula non lorem eu, consequat ornare felis. Ut vitae enim ante. Sed vitae tempus felis, vel auctor diam. Morbi vel nunc ut lorem ullamcorper vulputate ut fringilla ipsum. Cras egestas leo justo, ut vulputate justo bibendum in. Proin interdum, lorem sit amet vulputate ultrices, sem neque tempus turpis, id auctor libero est vel sapien. Etiam consequat pharetra blandit. In eu sagittis augue, laoreet convallis felis. In semper consectetur volutpat. Nullam in semper nunc. Integer hendrerit ultricies nisl non molestie.</p>
<p>Donec non massa lorem. Quisque rutrum condimentum dictum. Sed finibus purus eget arcu eleifend porttitor. Integer non metus nibh. Donec risus erat, lobortis vitae neque in, porta posuere risus. Nam fermentum arcu velit, sit amet tristique mauris ultrices eu. Nulla facilisi. Maecenas in orci sed nisi euismod faucibus et at metus. Mauris quis orci vel nunc egestas lacinia. Suspendisse rhoncus gravida felis, quis facilisis nibh. Vestibulum ex ante, consequat ac diam sit amet, pharetra venenatis enim. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacinia arcu in ornare lacinia. Aliquam eget nibh leo.</p>
<p>Nulla facilisi. Mauris convallis purus at efficitur accumsan. Fusce id tincidunt dui. Aliquam et varius diam. Duis euismod eros non justo porta, et porttitor erat viverra. Nullam congue luctus dignissim. Duis nisi massa, faucibus a gravida vitae, viverra non risus.</p>
<p>Maecenas vitae justo vehicula, lacinia odio facilisis, mollis erat. Nam id ligula ante. Sed pharetra rutrum urna imperdiet elementum. Proin ultricies venenatis mauris nec pretium. Praesent dignissim quis ante id suscipit. Donec pellentesque est lorem, a rhoncus lacus luctus quis. Sed eu turpis at nisl tempor blandit a non felis. Aenean elementum tempus purus, sit amet vulputate nibh malesuada eget.</p>
<p>Vivamus eget imperdiet lacus. Phasellus sit amet vulputate lorem, sit amet facilisis velit. Sed ac arcu condimentum, ultricies nisi lacinia, tincidunt sem. Sed non nisi sagittis purus egestas volutpat et a libero. Fusce in accumsan nisi, nec laoreet ipsum. Integer pulvinar ex ut mi commodo, ac volutpat lectus condimentum. Phasellus velit ante, fringilla sit amet dapibus nec, maximus sit amet nunc. Duis molestie eget nisl at iaculis. Sed vestibulum massa sit amet urna interdum ornare. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam quis molestie neque. Sed nec ex semper, aliquet urna in, pulvinar magna. Praesent id lorem sit amet ipsum hendrerit dictum venenatis in odio.</p>
<p>Integer ut sagittis lectus. Aenean rhoncus placerat volutpat. Morbi porta ornare tortor, nec tincidunt massa eleifend a. Nulla risus est, molestie id urna blandit, imperdiet scelerisque quam. In ut turpis ullamcorper, porttitor orci at, mattis mauris. Suspendisse maximus diam et nibh suscipit viverra. Cras dolor nulla, varius eu elementum nec, viverra vitae orci. Ut sed purus in dui cursus pretium. Mauris congue nulla volutpat, convallis diam sit amet, venenatis justo. Sed eget odio ex.</p>
<p>Duis eu mauris vitae tortor placerat aliquam non nec mi. Phasellus faucibus sapien vestibulum dui pharetra interdum. Sed ut aliquet est. Maecenas vel efficitur arcu, non bibendum sapien. In fermentum commodo nisi ac pharetra. Ut vitae turpis at magna tempor pharetra sit amet sit amet erat. Maecenas vel nisi nibh. Cras malesuada semper aliquet. Nam nec ullamcorper massa. Cras ac mi eu ipsum faucibus eleifend vitae sit amet diam. Interdum et malesuada fames ac ante ipsum primis in faucibus. Ut eget dolor ipsum. Quisque pellentesque ex sed eros pretium elementum. Sed ut lorem vel neque commodo tempus ut id leo. Nulla egestas urna at tortor lacinia scelerisque sit amet porta velit. Fusce congue tempor urna et pulvinar.</p>
<p>Ut mi erat, luctus sit amet ultrices sed, finibus nec lectus. Ut laoreet mi ac massa aliquam, non ultricies velit sagittis. Nunc pharetra lorem odio, nec rhoncus nisl porta a. Curabitur a nulla enim. Praesent in fermentum metus, et condimentum ipsum. Duis non commodo elit. Nam viverra consectetur est. Etiam et est orci.</p>
<p>Donec lobortis, neque non elementum sagittis, purus dui pretium nisi, at fermentum metus purus nec urna. Praesent et egestas arcu. Morbi tempor tristique nunc, nec molestie leo porta sed. Etiam vehicula ex rutrum ipsum commodo, sed ornare nunc cursus. Phasellus convallis fermentum sapien, non placerat nulla feugiat a. Duis sit amet justo at dui facilisis elementum. Maecenas accumsan luctus lacus, sit amet pulvinar sapien varius sed. Curabitur interdum, enim vitae finibus gravida, massa sapien facilisis nibh, sed rhoncus justo enim ut leo.</p>
<p>Etiam eu augue nulla. In porttitor varius nunc, vel pharetra enim interdum eget. Nam gravida, nibh venenatis molestie maximus, eros lectus porta mauris, sed rutrum sem sem a massa. Sed nisl sapien, volutpat ut tortor ut, hendrerit suscipit orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec condimentum erat non accumsan vehicula. Vivamus massa enim, fermentum at faucibus in, lobortis eu eros. Nunc tristique venenatis dolor, in ullamcorper purus dapibus vel. Sed ornare neque sed nulla pretium volutpat ac sed massa. Aliquam erat volutpat.</p>
<p>Cras nibh magna, laoreet ut elementum eget, tincidunt ut ante. Integer nec semper nulla. In sit amet vulputate libero. Suspendisse posuere auctor purus bibendum sagittis. Nullam nec magna placerat massa dignissim rhoncus. Fusce sed scelerisque dolor. Nam tristique fermentum purus, ac vestibulum arcu. Nunc semper sit amet eros sit amet vulputate. Donec venenatis vulputate metus vel venenatis. Proin non turpis porta, gravida erat a, rhoncus tortor.</p>
<p>Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum semper ipsum leo, non pulvinar quam egestas nec. Aliquam non arcu imperdiet, aliquet metus sit amet, venenatis quam. Praesent fringilla non lacus in consectetur. Praesent sit amet aliquet velit. Duis at tellus dui. Phasellus varius, tellus sit amet porttitor tempus, augue massa accumsan nisl, nec euismod nibh mauris eu nulla. Curabitur velit massa, vestibulum vitae nibh id, venenatis pretium erat. Sed dignissim arcu ante. Sed ex est, tempus ac lorem vitae, mattis porttitor odio. Curabitur fermentum enim nec sodales feugiat. Fusce gravida dui luctus nisi maximus interdum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc porta at dui quis congue. Curabitur quis nisl lacinia, feugiat massa tincidunt, lobortis mauris.</p>
<p>Phasellus non sagittis tellus. Curabitur ac tempor dui. Nullam congue urna nisl, id hendrerit nibh finibus quis. Curabitur a metus quis odio posuere auctor. Duis fringilla massa tellus, id accumsan justo ornare sed. Etiam dictum, justo nec interdum sagittis, velit enim maximus nibh, id ultricies turpis ante id est. Donec congue, lectus vel maximus bibendum, tellus mi pretium lorem, quis vulputate est nibh eget odio. Sed eget nibh vitae ipsum maximus fermentum. Cras eleifend nec turpis a consectetur. Mauris consequat, arcu ut molestie lobortis, nibh massa ultrices tortor, non eleifend purus magna faucibus ex. Aenean ornare sem vel luctus semper. Etiam sit amet augue sit amet lorem fringilla blandit vitae a ante. Donec diam justo, semper sit amet diam nec, bibendum fermentum neque. Nulla gravida lectus at dui hendrerit, at hendrerit augue interdum.</p>
<p>Pellentesque elementum convallis magna efficitur pretium. Nunc molestie a urna hendrerit molestie. Pellentesque congue eget dui in hendrerit. Maecenas sem libero, placerat in consectetur at, sodales eget velit. Morbi mollis rutrum lobortis. Nunc purus mauris, ullamcorper commodo sem in, dignissim viverra libero. Vestibulum rutrum nisl sed urna suscipit, non sollicitudin sapien dapibus. Duis vitae purus tortor. Mauris tortor ligula, pretium nec sem ut, mattis luctus magna. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed commodo tempor lacus, eget maximus ex pulvinar vel. Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
<p>Vivamus dolor tortor, congue eu sagittis vel, hendrerit id tellus. Morbi eu ante quis lorem convallis commodo. Morbi auctor justo eu iaculis gravida. In vel tortor venenatis, congue ex sed, ullamcorper erat. Vivamus bibendum tortor ut neque mattis, eu fringilla sem euismod. Curabitur posuere tincidunt felis nec accumsan. Nullam a ullamcorper dolor, eget convallis metus. Cras vitae mi consectetur, luctus lacus nec, scelerisque est. Aliquam in tempor tellus. Suspendisse et dui sapien. Nulla id commodo nisl. Sed tempor posuere elit, nec molestie purus sollicitudin nec. In facilisis, odio sed hendrerit malesuada, nibh purus porta ipsum, sodales blandit est sapien eget lorem. Quisque consequat est massa, at viverra magna varius eget. Fusce sed dictum ligula, in viverra orci. </p>
</article>
</body>
</html>