javascript - 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%;
      }
}