javascript - Print header in all pages of a html document without overlapping -
is possible print header , footer in pages of html document using css without overlapping header , content. have tried "position:fixed" header overlaps body content. when tried set "top:margin" body of content applied first page.
code sample
<html> <head> <style> div#myheader { position: fixed; top: 0; left: 0; width: 100%; height: 2em; padding-bottom: 3em; margin-bottom: 10px; } @media screen { div#myheader { display: none !important; } div#maincontent { margin-top: 0; } } @media print { div#myheader { display: block; } div#maincontent { margin-top: 0em; } } </style> </head> <body> <div id="myheader" class="header" style="display: block;"> header </div> <div id="maincontent"> // have more 150 lines here </div> </body> </html> note: please don't mark question duplicate. saw similar questions in stack overflow , other blogs. nothing helped me. have been struck month. please comment solutions.
i think understand you're saying, want header every printed page overlapping content when use position: fixed?
if because position: fixes property removes element document flow, main content still in document flow not move out of way of fixed heading it's not in flow push it. margin-bottom on header have no effect.
do have rough height header going be?
you can use position fixed push main content down via margin simulate header being part of document flow so:
@media print { div#myheader { display: block; } div#maincontent { margin-top: 200px; } } here you're having content pushed down whatever size header is. js if header has dynamic height.
Comments
Post a Comment