I need to make a report in HTML that is supposed to be A4 size exactly. It needs headers and footers. Surely this can be done with css yeah?

does anyone have any examples or sample code for this?

I googled and the code snippets I got all talk about media queries and they don't work..

so basically it is for print Purposes, the html generated will be converted to a PDF document.
I am using MVC4 and found a tool that will convert a view to a PDF. A view is just pure HTML. So I thought why not style the HTML to represent the output report, then PDF it.

So I need the ability to have a header, and a footer (bottom of the page) and then content in the middle of both of them

I tried using the following code, but it doesn't seem to work..

```
<html>
<head>
    <style type="text/css" media="all">
        @page {
            size: A4 portrait; /* can use also 'landscape' for orientation */
            margin: 1.0in;
            border: thin solid black;
            padding: 1em;

            @bottom-center {
                content: element(footer);
            }

            @top-center {
                content: element(header);
            }
        }

        #page-header {
            display: block;
            position: running(header);
        }

        #page-footer {
            display: block;
            position: running(footer);
        }

        .page-number:before {
            content: counter(page); 
        }

        .page-count:before {
            content: counter(pages);  
        }
    </style>
</head>

<body>
    <div id="page-header">
        <p>Header text</p>
    </div>

    <div id="page-footer">
        <p>Footer text</p>
        <p>Page <span class="page-number"/> of <span class="page-count"/></p>
    </div>

    <div id="page-content">
        <p>Page 1.</p>

        <p style="page-break-after:always;"/>

        <p>Page 2.</p>
    </div>
</body>
</html>

```