I am working on styling for a print page. What I would like to do is have a footer on every printed page, with a specified height. I am achieving this by using position:fixed; unfortunately this causes the footer to cover some of the page content. I have tried adding bottom margin/padding for @page but when I use margin, it pushes the footer up and when I use padding it doesn't seem to have any effect.
.container {
font-size:45px;
}
.print-footer {
display:none;
height:60px;
background:#fff;
width:100%;
position:fixed;
bottom:0;
}
@page {
size:8.5in 11in;
margin:0;
/*margin:0 0 60px 0;*/ /* this pushes the print-footer element up */
padding-bottom:60px; /* this doesn't seem to have an effet */
orphans:5;
widows:5;
}
@media print {
.print-footer {
display:block;
}
}<div class="container">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus lobortis convallis risus vel egestas. Pellentesque augue felis, molestie ac mollis id, aliquam id mi. Mauris bibendum enim elit, eget porttitor dolor pretium vel. Phasellus lorem sapien, sollicitudin a pellentesque vitae, venenatis eu metus. Aliquam porttitor molestie vehicula. In maximus massa tellus, ut pulvinar velit viverra et. Pellentesque ornare lobortis efficitur. Quisque viverra tellus libero. Morbi ullamcorper neque est. Suspendisse consectetur metus consectetur dolor volutpat commodo. Vestibulum tempus nisl eu congue imperdiet. Suspendisse id sapien vitae nibh sodales tristique. Nam porttitor arcu non nisl aliquet, sit amet vulputate diam vehicula. Sed quis arcu vel dolor egestas volutpat laoreet sagittis urna.</p>
<p>Suspendisse quis mi nec diam faucibus feugiat et sed ipsum. Fusce tempus arcu vitae felis tempor porta. Quisque at purus sed lorem lacinia aliquet sed interdum est. Proin a lacus a neque tincidunt auctor. Maecenas interdum tempus lorem nec viverra. Integer sollicitudin diam vel risus feugiat, ac sagittis nisi ullamcorper. Aliquam non fermentum ex. Aliquam suscipit odio dolor, aliquet commodo est rhoncus a. Duis vestibulum lacinia dolor non fermentum. Morbi pulvinar in orci quis mollis.</p>
<p>Maecenas vitae risus diam. Morbi sed arcu bibendum, tempus mi vel, elementum mauris. Mauris ut vestibulum magna. Fusce ultrices erat quis rutrum consequat. Quisque lobortis orci at placerat efficitur. Pellentesque sollicitudin tellus a felis rhoncus porttitor. Maecenas tempor massa vitae dolor tempus ultrices.</p>
<p>Sed euismod facilisis auctor. Phasellus non ligula convallis, ullamcorper purus in, lobortis dolor. Sed quis pulvinar arcu. Nunc eget ultricies tortor. Quisque tincidunt sapien at leo venenatis, et dictum eros condimentum. Praesent in arcu tortor. Integer non nulla id risus rutrum molestie. Sed quam dolor, mollis non consequat vel, elementum a sem. Pellentesque consequat pulvinar tempus. Morbi vel turpis semper, lacinia orci sodales, auctor erat.</p>
<p>Praesent non mauris risus. Nullam vel urna eleifend mi sollicitudin facilisis ut vel sapien. Cras cursus, massa sed feugiat consequat, orci ex feugiat elit, vitae rutrum neque dolor a nibh. Aenean pellentesque tempor nunc in viverra. Curabitur fermentum, ante ut iaculis semper, libero elit vehicula orci, non elementum elit eros nec diam. Nullam vel sodales purus. Donec non ex accumsan, consequat orci ut, ultrices massa. Etiam sagittis porta maximus. Aenean egestas nisl eu ultricies tempor. Pellentesque id dictum elit. Fusce euismod mi non tortor lacinia dapibus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
</div>
<div class="print-footer">Print page footer content goes here </div>As you can see in the result form the code above, the footer is cutting off content:
