Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Printing / Specific Stylesheets

Adding Footer For Printing Web Pages And Setting Margins

Post a Comment
I want to add a footer to an HTML page that will be repeated across all pages WHEN PRINTING. I have managed to achieve this through this code: @media print { p.note { b

Solution 1:

Here's the solution that worked, CSS is this:

@media print {
    p.note {
        display:block;
        bottom:0;
        position:fixed;
        font-size:11px;
    }
}

And everything needs to be contained in a separate div with this CSS

#wrapper {
    position:relative;
    bottom:1in;
    margin-top:1in;
    width:974px;
    margin:0 auto;
}

This worked perfectly!

Solution 2:

How about adding some z-index ? It seems that the footer overrides the last paragraph Also try to use

@media print {
    p.note {
        bottom: 0; position: fixed;
margin-top:10px; 
    }
}

Solution 3:

Make sure that the container for the main content makes room for the footer. For instance, if your markup looks something like this:

<divid="content"><p>Lorem Ipsum Latin et cetera</p></div><pclass="note">Footer</p>

You'd want some css like this:

#content {margin-bottom:4in}

Solution 4:

To create room for your footer text you can use a table with tfoot. Use tfoot>tr to create a spacer. Place your footer text inside a div container that has position:fixed; to bottom:0;.

CSS

table {width:100%;}
@media print {
  tfoot>tr {height:20mm;}
  tfootdiv {position:fixed;bottom:0;}
}

HTML

<body>
  <table>
    <thead><tr><td>Page header</td></tr></thead>
    <tbody><tr><td>
      <p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
    </td></tr></tbody>
    <tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
  </table>
</body>

Post a Comment for "Adding Footer For Printing Web Pages And Setting Margins"