Menu
Method 1: Remove Header and Footer Firstly, double click to enter the header or footer area. Then click “Header” or “Footer” under “Design” tab. Next on drop-down menu, choose “Remove Header” or “Remove Footer” respectively. Finally, double click on space outside the header or footer area to exit.
Click the Gear icon in the top right corner, go into Print, and then select Page setup. Then make sure all of the Headers and Footers dropdowns are set to -Empty-.
In Chrome it's possible to hide this automatic header/footer using
@page { margin: 0; }
Since the contents will extend to page's limits, the page printing header/footer will be absent. You should, of course, in this case, set some margins/paddings in your body element so that the content won't extend all the way to the page's edge. Since common printers just can't get no-margins printing and it's probably not what you want, you should use something like this:
@media print {
@page { margin: 0; }
body { margin: 1.6cm; }
}
As Martin pointed out in a comment, if the page have a long element that scrolls past one page (like a big table), the margin is ignored and the printed version will look weird.
At the time original of this answer (May 2013), it only worked on Chrome, not sure about it now, never needed to try again. If you need support for a browser that can't hable, you can create a PDF on the fly and print that (you can create a self-printing PDF embedding JavaScript on it), but that's a huge hassle.
I am sure Adding this code on your css file will solve the problem
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the initial value */
margin: 0mm; /* this affects the margin in the printer settings */
}
</style>
You may visit this to know more about this
Firefox :
moznomarginboxes attribute in <html>
Example :
<html moznomarginboxes mozdisallowselectionprint>
Today my colleague stumbled upon the same issue.
As the "margin:0" solution works for chromium based browsers, however, Internet Explorer continue to print footer even if @page margins are set to zero.
The solution (more of a hack) was to put negative margin on the @page.
@page {margin:0 -6cm}
html {margin:0 6cm}
Please note that negative margin won't work for Y axis, only for X
Hope it helps.
The CSS standard enables some advanced formatting. There is a @page directive in CSS that enables some formatting that applies only to paged media (like paper). See http://www.w3.org/TR/1998/REC-CSS2-19980512/page.html.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Print Test</title>
<style type="text/css" media="print">
@page
{
size: auto; /* auto is the current printer page size */
margin: 0mm; /* this affects the margin in the printer settings */
}
body
{
background-color:#FFFFFF;
border: solid 1px black ;
margin: 0px; /* the margin on the content before printing */
}
</style>
</head>
<body>
<div>Top line</div>
<div>Line 2</div>
</body>
</html>and for firefox use it
In Firefox, https://bug743252.bugzilla.mozilla.org/attachment.cgi?id=714383 (view page source :: tag HTML).
In your code, replace <html> with <html moznomarginboxes mozdisallowselectionprint>.
@media print {
.footer,
#non-printable {
display: none !important;
}
#printable {
display: block;
}
}
avoiding the top and bottom margin will solve your problem
@media print {
@page {
margin-left: 0.5in;
margin-right: 0.5in;
margin-top: 0;
margin-bottom: 0;
}
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With