CSS Property Value How to - Turn off footer for screen, display foot on printing for all pages

Question

We would like to know how to turn off footer for screen, display foot on printing for all pages.

Answer


<!DOCTYPE html>
<html>
<head>
    <style type="text/css">
        @media screen {<!--from w ww  .ja v a 2 s  .  c o m-->
            .page-footer, .page-break {
                display: none;
            }
        }

        @media print {
            body {
                margin: 0;
            }

            .page-section {
                height: 9.5in; /* IE default margins are .75in */
                position: relative;
            }

            .page-footer {
                display: block;
                position: absolute;
                bottom: 0;
            }

            .page-break {
                page-break-before: always;
            }

        }
    </style>
</head>
<body>
    <div class="page-section">
        <div>One</div>
        <div>Two</div>
        <div class="page-footer"><span class="footer-text">Footer one</span></div>
    </div>
    <div class="page-break"></div>
    <div class="page-section">
        <div>Three</div>
        <div class="page-footer">Footer two</div>
    </div>
</body>
</html>

The code above is rendered as follows: