Using CSS @print for headers/footers without overlapping content
Question
I am running into an issue with an application that I am working on when printing the HTML page. The application pulls from a generated report as its data source to populate content into HTML elements, for this we are using HandlebarsJS templating framework.
The application is integrated as a Sharepoint webpart (essentially an iFrame that has the application within a Sharepoint page) and on the screen, it appears as if the view is one endless page with the set header only at the very top of the view and the footer at the bottom (this is expected behavior).
However, when printing this page, we would like the header and footer repeated on each different page.
@media print {
header {
position: fixed;
top: 0;
}
footer {
position: fixed;
bottom: 0;
}
}
Using this CSS rule, we are able to establish the headers and footers to be repeated, but any content that runs over into the next page is overlapped and does not provide a pleasant printed view. I have tried manipulating margin properties but no to success, and because the nature of the app is dynamic, I don't exactly know which HTML elements will run over to the next page each time for each given report.
I am merely responsible for uploading HTML snippets to a templating library for the template views, and the application code takes care of the entire page itself so I do not have access to <html> , <body> , or <head> tags.
Have looked all over the web for solutions, but seems that this is still an issue people run into today. Is anyone familiar with a solution to solve this issue?
1 answers
solution1
1 2018-02-01 21:48:16
position: fixed will, by nature, cause your elements to be fixed to that part of the page. That means that if other content should exist at that location, the fixed elements will overlap it.
Assuming your <header> and <footer> tags are at the top and bottom of your content respectively (as they should be), the <header> will automatically be in the right place on the page. Without position: fixed , you will be able to apply margin-bottom to the <header> under its default static position if you wish to shift the rest of the content down the page.
As such, all you need to worry about is the footer, which can be set to be at the bottom of the page regardless of the height of the content with flexbox :
html,
body {
height: 100%;
}
body {
display: flex;
flex-direction: column;
}
.content {
flex: 1 0 auto;
}
Both of these can be seen in the following (with small content):
html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } header { margin-bottom: 20px; } footer { margin-top: 20px; }
<header>Header</header> <div class="content">Tiny Content</div> <footer>Footer</footer>
And with a lot of content:
html, body { height: 100%; } body { display: flex; flex-direction: column; } .content { flex: 1 0 auto; } header { margin-bottom: 20px; } footer { margin-top: 20px; }
<header>Header</header> <div class="content">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut interdum accumsan quam, a vestibulum quam lacinia vel. Nam id odio rhoncus, viverra nisi quis, vehicula lectus. Duis sodales, mauris a tincidunt elementum, odio lorem finibus est, in vestibulum nunc leo dignissim tortor. Vestibulum sed diam id nisi congue pretium. Suspendisse venenatis posuere lectus, non pretium sapien blandit placerat. Fusce mollis ullamcorper tincidunt. Mauris consectetur porta justo quis mollis. Integer non nisi id velit tincidunt tristique. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Vivamus dictum orci libero, et vulputate lorem rutrum in. Nam eget ipsum massa. Proin aliquam felis orci, fermentum dignissim magna congue nec. Maecenas pharetra sodales tellus eu maximus. Curabitur iaculis, diam quis finibus cursus, justo ex luctus eros, ut venenatis eros diam quis dolor. Vestibulum eget porta odio. Quisque et sodales tellus, non fermentum odio. Praesent a nulla in ipsum pellentesque elementum nec quis neque. Sed congue risus libero, sed aliquam libero euismod et. Nunc id ultrices risus. Vestibulum ut diam sapien. Donec semper turpis vitae iaculis rutrum. Donec dignissim ornare massa, ut rutrum diam egestas vitae. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Suspendisse potenti. Praesent vulputate iaculis tincidunt. Phasellus sit amet dolor a justo mollis fermentum. Quisque a varius nisl. Sed vel nisl sit amet mi mollis sagittis at in lacus. Cras at velit sit amet nibh viverra dignissim vel ullamcorper mi. Curabitur convallis ante vel sapien gravida, non feugiat nisi dictum. Maecenas vitae ullamcorper eros, eget mollis purus. Nam rutrum eros eu rhoncus suscipit. Praesent sit amet posuere eros. Mauris ut nisl a elit gravida luctus et id orci. Etiam tempor, nunc id volutpat interdum, ligula libero imperdiet magna, auctor mattis nunc nisl ac augue.</div> <footer>Footer</footer>
This is the 'best' way to create a footer thatt will always stay at the bottom without overlapping in my opinion, but there are actually four other different ways, which can be seen at CSS Tricks .
Hope this helps!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.