Css for printing

Hi everyone.
I would like to print a specific div on a web page.
I put style inside @media{} to hide all the elements on the page,
and make the div visible

But when I print the page, the content of the div is trimmed.
There is only one printing page. But the content should be more of it.
When I switch to print the page in around 70%, the whole div is visible on the page.

Could anyone please figure out the problem for me?

Thanks a lot!!:frowning:

I have a need to position two divs each containing a table. By mistake I found a fixed position element appears much as it does on the screen, occupying its correct width and even has good position. However, I couldn’t use this solution because my content is about 2 pages and the fixed position content simply repeats on the next page, without continuing.

Try experimenting with position: fixed…


Could you kindly post the relevant code?

The first question is really, is the div fixed, or % width? If the div width exceeds the margins of a printed page, there’s a good chance it’s going to get clipped like so.

As others have said, you should try to avoid use of dimensions and positioning as far as possible on print CSS, because it has a tendency to make a complete hash of everything.

One thing to be wary of - I am fully in favour of using print.css to hide all irrelevant elements, like navigation and adbars, but I’m not sure whether I’d necessarily agree with hiding everything except one element. If a visitor was on that page and clicked ‘Print’, is that all they would want printed? Might they expect or want it to print more of the content than that? Just something to be aware of.

When printing you should remove all width and heights and use static positioning. The simpler the better and the more chance of success :).

As mentioned above we’d need to see more code if this wasn’t the issue.