问题
I want to print my html page. I have more than 1 page and I want print my footer only at the bottom of the last page. My css
@page {
size: 8.5in 11.0in;
margin-left: 0.7cm;
margin-top: 0.7cm;
margin-top: 0.7cm;
margin-bottom: 2.6cm;
margin-right: 0.5cm
}
#footer {
clear: both;
position: running(footer);
z-index: 10;
margin-top: -1em;
vertical-align: bottom;
height: 5%;
}
@page {
@bottom-center {
content: element(footer);
}
}
HTML:
<body><div id="content"></div>
<div id="footer"></div>
<body>
It works, but when I have very big table in the end my content, for example 6 pages table, my footer populates for all pages with table.
回答1:
To make it more simple you could position the footer within a media query for printing another way:
@media print {
body {
position: relative;
}
#printfooter {
position: absolute;
bottom: 0;
}
}
As a quick work-around suggestion. Or you use css3 with the @page extension:
@page:last {
@bottom-center {
content: element(footer);
}
}
For further information w3 has a pretty good documentary about CSS Paged Media Modules. 5.3, Example 7 is the information your good to go with!
Hope one of this helps! If, or if not please let me know.
Best regards, Marian.
来源：https://stackoverflow.com/questions/27448199/html-footer-at-the-last-printed-page