Html Question posted in
Some basic documentation can be found here.

Html – how to remove white space in print preview after the footer and fix the footer at the bottom of the page in print preview?

There is a white blank space after the footer in print preview, I want to remove that space and fix my footer at the bottom of the page. I tried this code

 @page {
 size: A4;
 margin: 0;
}
@media print {
   footer {
       position: fixed;
       bottom: 0;
       width: 100%;
   }

This code worked but the text is printed twice and overlap each other

Tags:

2

Answers


  1. 0

    CSS for the footer without position: fixed:

    @media print {
   footer {
       position: relative; /* or use normal flow */
       bottom: 0;
       width: 100%;
   }
   .avoid-page-break {
           page-break-after: avoid; /* or page-break-before: avoid; depending on your layout */
   }
}

    if you get still issue you need to inspect your HTML structure and CSS styles further to identify any potential causes of duplicate content or overlapping text during printing.

    Login or Signup to reply.
  2. 0 
    @media print {
    footer {
        position: fixed;
        bottom: 0;
        width: 100%;
        overflow: hidden; /* Add this line */
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search