How to Remove URL from Printing the Page ?

07 Jun, 2022
When you print a Web page from your Web browser, you’ll notice that the printout contains some extra pieces of information like the page number, the date and the web page’s URL at the bottom of the page. Some times you may not need this information in your printout in order to tidy up your work. 
So here are a few methods that let you print web pages without the extra information appearing at the bottom of the page. 
 
There are two approaches through which we can achieve this.
Programatical Approach: Here are few simplest ways of doing it. 
Programatical Approach: Here are few simplest ways of doing it. 
Example 1: 
css
@page {    size: auto;    margin: 0;}
Example 2: 
css
@print {    @page :footer {        display: none    }     @page :header {        display: none    }}
But there may occur some issue on browser due to which the above code does not work. So the following code can be used to overcome browser issues. Example 3: 
But there may occur some issue on browser due to which the above code does not work. So the following code can be used to overcome browser issues. Example 3: 
css
@media print {    @page {        margin-top: 0;        margin-bottom: 0;    }    body {        padding-top: 72px;        padding-bottom: 72px ;    }}
Browser side Approach: There are the steps to disable the header and the footer in a browser.Microsoft Edge: Go to the File menu and choose Page Setup from the drop-down menu and click the menu that displays URL in the Headers and Footers section and select “-Empty-” from the menu.Mozilla Firefox: Go to the Page setup option from the file menu and click the Margins & Header/Footer tab. Change each value under Headers & Footers to –blank–.Google Chrome: Go to the Menu icon in the top right corner of the browser and Click on Print button. Uncheck the “Headers and footers” option underneath the “Margins” option.Apple Safari: Go to the print option from the menu and the Print dialog appears. Uncheck the “Print headers and footers” option.
Browser side Approach: There are the steps to disable the header and the footer in a browser.Microsoft Edge: Go to the File menu and choose Page Setup from the drop-down menu and click the menu that displays URL in the Headers and Footers section and select “-Empty-” from the menu.Mozilla Firefox: Go to the Page setup option from the file menu and click the Margins & Header/Footer tab. Change each value under Headers & Footers to –blank–.Google Chrome: Go to the Menu icon in the top right corner of the browser and Click on Print button. Uncheck the “Headers and footers” option underneath the “Margins” option.Apple Safari: Go to the print option from the menu and the Print dialog appears. Uncheck the “Print headers and footers” option.
Microsoft Edge: Go to the File menu and choose Page Setup from the drop-down menu and click the menu that displays URL in the Headers and Footers section and select “-Empty-” from the menu.
Mozilla Firefox: Go to the Page setup option from the file menu and click the Margins & Header/Footer tab. Change each value under Headers & Footers to –blank–.
Google Chrome: Go to the Menu icon in the top right corner of the browser and Click on Print button. Uncheck the “Headers and footers” option underneath the “Margins” option.
Apple Safari: Go to the print option from the menu and the Print dialog appears. Uncheck the “Print headers and footers” option.
Sample Output:
When Url is visible:  Also, note that the headers and footers box is checked.
When Url is removed:  Note that the headers and footers box is unchecked.
satyamm09
CSS-Misc
Picked
CSS
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.