Print footer at bottom of page in safari

css printing safari

14,782

Solution 1

I just printed this out in Chrome (same rendering engine as Safari), and the line showed at the bottom...

<!DOCTYPE html> 
<html> 
  <head> 
    <title>Testing</title> 
    <style type="text/css" media="print">
      html, body { margin: 0; padding: 0; }
      body { height: 11in;  width: 8.5in; }
      #footer { position: absolute; bottom: 0; }
    </style> 
  </head> 
  <body> 
    <div id="footer"> 
      This will always print at the bottom
    </div> 
  </body> 
</html>

Notice that I have media="print" on the style tag. For more on this, read Going to Print on ALA.

Solution 2

This is the code i use. Note I am setting both html and body height to 100% which is needed for Chrome and Safari.

@media print {
  html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
  }
  #footer {
    position: absolute;
    bottom: 0;
  }
}

14,782

Author by

Richard

Updated on June 08, 2022

Comments

Richard about 2 years
I am trying to position a div (footer) element at the bottom of a printed page. In firefox this is working fine and the div will sit along the bottom of the printed page.

However, in Safari the footer moves up the printed page if the browser window is not very tall. eg. if the browser window is 200px tall then the footer sits on the print out about 200px down. If the browser is 400px tall it draws the footer 400px down the page.

I would like to get the same behaviour in Safari as I can get in Firefox if possible?

The basic code I am using for this is:
```
<html>
    <head>
        <title>Print footer at bottom of a printed page</title>
        <style type="text/css">
            * { margin:0; padding:0; }
            html, body { height: 100% !important; }
            #footer { height:25px; border-top:solid 1px #000;
                      position:absolute; bottom:0; }
        </style>
    </head>
    <body>
        <p>Some content on the page here</p>
        <div id="footer">This should appear at the very bottom of the printed page</div>    
    </body>
</html>
```
Edit: I'm happy if the solution requires a hack...it only needs to work in Safari
Richard almost 14 years

Thanks. I didn't realise you could specify a size in terms of inches / cm.
Eric L. about 11 years

Holy smokestacks! Simply adding the height/width in inches to body {} lets Chrome 26 magically scale the webpage down to fit the printed page. I had no idea its print support was so... awesome. This radically simplified the CSS hacks I was using. Thank you so much for reminding me of CSS's support of inches, Mr. Stodola.
joe.feser about 7 years

With multiple pages it only displays on the last page