Having trouble printing a 2-page document on Chrome. The first page has fixed content while the second page has dynamic content in an extended table.
The problem I'm facing is keeping the footer at the bottom of the second page. The CSS code below worked fine with a single page layout.
Check out the jsfiddle example: https://jsfiddle.net/c3L4eevn/
CSS
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 110px;
font-size: 15px;
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 110px;
}
@page {
size: legal;
}
@media print {
#hide {
display: none !important;
}
}
.container {
width: 970px !important;
}
HTML
<div class="container">
<div class="row">
<div class="col-xs-12">
head here
</div>
</div>
<div class="row">
<div class="col-xs-12">
first page content
</div>
</div>
<div class="row">
<div class="col-xs-12">
second page
</div>
</div>
</div>
<footer class="footer">
<div class="container">
<div class="row">
<div class="col-xs-12">
footer here
</div>
</div>
</div>
</footer>