window.print() is not printing the whole page

Question

I have a page

I want to print this page. On print button i am using something like this

<input id="print" type="submit" onclick="window.print();" />

But the problem is it is not printing the whole page. Like it only print that is currently in the view. When i click on the print button then till Email:[email protected] page print. It does not print the text below the scrollbar.

How can i print the whole text. Like suppose i have a very big page and i am using tabs to accommodate my page. And when click on print button, then i want to include the whole page including tabs. How can i do it?

Thanks

Answer 1

you should use a separate css file for printing the page or use css3 media queries:

<link rel="stylesheet" href="css/print.css" type="text/css" media="print"/>

using percentage values its the best option when you create a css print file.

body, html, #wrapper {
    width: 100%;
}

or in your main css file:

@media print {
      body, html, #wrapper {
          width: 100%;
      }
}

Answer 2

use

  body,html { margin-top:0%;
   display:block;
   height:100%;}

Answer 3

using this CSS

@media print{ 
    body, html, #page-container, .scrollable-page, .ps, .panel {
        height: 100% !important;
        width: 100% !important;
        display: inline-block;
    }
}