Geek Answers Handbook

@media print div: how to allow overlapping page text in the header?

I use @media to print a title on every page when printing a screen on a page in Firefox. I have css configured as follows:

@media print { div.printDivHeader { font-family: Arial, Helvetica, sans-serif; font-size: 1.0em; position: fixed; display: block; width: 100%; height: auto; top: 0; } }

The problem is that the contents of the second page overlap with the header of the print header. (that is, on the second page, the title does not cause the content of the page to drop, and therefore I get the text written above the text). Is there any way to handle this?

+7
source share
4 answers

Something with position: fixed; never pushes static (or relative) content. Either there is a style to make sure that they do not overlap ... or they overlap.
See this JSFiddle example which uses your css.

The problem lies elsewhere. How does the title not overlap with the text on the first page? Do you have something pushing the text? Margin top What?

Is it possible to use either an original or a simplified example? (You can use JSFiddle .)

+1
source

Add this to the header rule: bottom:3em; 3em change to match content.

Then add a separate separate div selector to the rule for your content area:

 div.printDivContent { position: relative; width: 100%; top:3em; //match size of header left:0px; right:0px; }
+3
source

The CSS key "box-decoration-break" will help with the installation of the "clone". See: CSS Fragmentation

You can create a container class around your content with a difference in the top and bottom sizes of your header and footer, and then set break-decoration-break for this container to “clone”.

 #content { box-decoration-break: clone; margin-bottom: 90px; }
+2
source

I think you should use

 position:relative

instead

 position:fixed
+1
source

More articles:


All Articles