user3318489 user3318489 - 1 month ago 11
CSS Question

Bootstrap Modal dialog - footer should be at bottom of printing page

I use a dialog in my application which shows content and also a footer.
When the user print out the page (by pressing button Print Modal), this footer should be at bottom of printing page:

<div class="footer">
This should be the footer at printing page
</div>


but it is at the bottom of the dialog.
My question now would be if there is a possibility to move the footer at the bottom of the page?

My Problem

Answer

This is a fairly hard problem, and I think there is no easy answer to it. However, I was able to get the behaviour you wanted by using vh units:

@media print {
  .control {
    display: none;
  }
  .footer {
    top: 100vh !important; /*position below the bottom of the page*/
    margin-top: -30px; /*move back up by the height of the footer*/
  }
}

You could also use calc() for this, instead of the negative margin:

@media print {
  .control {
    display: none;
  }
  .footer {
    top: calc(100vh - 30px) !important;
  }
}

Updated JSFiddle