How to get Chrome to print webpages without some headers obscuring text

Question

There are many questions that have been answered about this kind of issue: How to get a PDF of a webpage that's searchable and has clickable hyperlinks. For example, this discussion.

What I'm addressing is a specific situation: I have vanilla Chrome and am not permitted to install add-ins or other browsers. (I also happen to prefer Chrome because its "Save as PDF" printing option creates clickable links.)

The problem is that some webpages have banners and other elements that overlay the text on the printed pages.

One solution offered in the thread cited above was to use Chrome's developer tools to set CSS rendering to "Screen." That helps a lot in some cases, but I still run into webpages where it doesn't work, and various elements continue to overlap the main text.

I have a solution that I will describe below.

Answer 1

My answer is kind of brute force and requires a little (not much) knowledge of HTML.

Instead of the rendering setting, I open the Chrome Developer Tools, then use the Select Element button:

I then select the offending element and go back to the Developer panel's HTML display, right-click on the element's HTML opening tag, and choose "Hide element."

I sometimes have to do this for a few elements, but then the Print | "Save as PDF" feature works, and I can see all the body text.