How I will print an HTML page with proper header and footer in all pages?

Question

0.00/5 (No votes)

See more:

I have a Webpage(HTML page),I want to print Page data on paper(has large content More then 10 pages).
I want Header and footer should be repeated in all the pages when I give print.
How should I achive this?

I found some solution like below

JavaScript

<style type="text/css">
    @media screen {
        div.divFooter {
            display: none;
        }
    }
    @media print {
        div.divFooter {
            position: fixed;
            bottom: 0;
        }
    }
</style>

But It is not work for me, '@media' element is showing as error.

Can anyone please suggest How I will achive this as am using asp.net mvc razor view.

Note:Currently am using google chrome browser

Thanks in advance

Posted 13-Aug-13 20:48pm

kirankoleti

Updated 13-Aug-13 21:35pm

v4

Add a Solution

Comments

Shubhashish_Mandal 14-Aug-13 3:02am

check out the version that you have used whether support @media or not
http://caniuse.com/css-mediaqueries

kirankoleti 14-Aug-13 4:20am

Using MVC4 its internally supports HTML5

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Sergey Alexandrovich Kryukov · Answer 1 · 2013-08-13T21:08:00

Solution 1

Unfortunately, not all layout engines correctly support @media features. Typically, they don't. This is not your application, these are browsers. You cannot do anything about it, except waiting until browsers improve.

For more detail on each engine per feature, please see: http://en.wikipedia.org/wiki/Comparison_of_layout_engines_%28CSS%29[^].

—SA

Posted 13-Aug-13 21:08pm

Sergey Alexandrovich Kryukov

Comments

Joezer BH 14-Aug-13 9:11am

5ed!

Sergey Alexandrovich Kryukov 14-Aug-13 9:38am

Thank you.
—SA