2

I know this subject has been discussed many times, but I have failed to find a satisfying answer. My problem is: I want a nice header and footer (with pictures etc.) on every page when I print my page. I have tried using the running() positions in CSS, but they don't seem to work (chrome 68), i.e. the header only appears on the first page. I also tried using position: fixed; top:0. The header and the footer are repeated, but they overlap with other elements.

            @media print {
                div.header {
                    position: fixed;
                    top: 0;
                }
    
                div.footer {
                    position: fixed;
                    bottom: 0;
                }
            }
    
            @media screen {
                div.header {
                    display: none;
                }
    
                div.footer {
                    display: none;
                }
            }
    <html>
    <head>
    </head>
    <body>
        <div class="header">
            Header
        </div>
        <div class="footer">
            Footer
        </div>
        <div class="content">
            <ol>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
                <li>element</li>
            </ol>
            </div>
    </body>
    </html>

I tried to work with this way, but attributes like margin-top or padding-top in div.content are only applied on the first printed page, and @page{margin-top:xyz} applies to the header and footer as well.

Does anybody know a solution to this problem?

One side note: the html I'm working with is generated by Sphinx so there's really no chance of manually splitting the contents (the ol in this case) and taking advantage of the padding attribute.

Thanks in advance, Michał

AbdulAhmad Matin
  • 1,047
  • 1
  • 18
  • 27
mpnowacki
  • 33
  • 5
  • Of course its going to overlap if your want a stationary footer with content that may be longer then the page itself. Try finding an example on the web on what the final product should look like and add that screenshot to your original question. – klewis Sep 03 '18 at 16:06
  • @klewis yeah, but isn't there a way to set a margin for each page and then place the footer and the header in that margin? – mpnowacki Sep 03 '18 at 16:50
  • Yes that's exactly what happens. Why doesn't that work for you? – Martin Sep 03 '18 at 17:01
  • @Martin it just doesn't, i tried numerous examples i found on the web. Have you got a working one? – mpnowacki Sep 03 '18 at 17:16
  • That's exactly I am looking and stuck for 2 days. Any help will be appreciated if you resolved it already. – Dexterslab Sep 11 '18 at 01:34

0 Answers0