Print footer at bottom of page in safari_问答_开发者

Print footer at bottom of page in safari

开发者 https://www.devze.com 2023-01-17 12:04 出处：网络

I am trying to position a div (footer) element at the bott开发者_开发百科om of a printed page. In firefox this is working fine and the div will sit along the bottom of the printed page.

相关专题：css printing

I am trying to position a div (footer) element at the bott开发者_开发百科om 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

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.

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;
  }
}

Have you tried this version?

http://www.themaninblue.com/experiment/footerStickAlt/

I know it works in browsers, but not sure about print.