Geek Answers Handbook

Print footer at bottom of page in safari

I am trying to position a div element (footer) at the bottom of the page . In firefox, this works 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 printout about 200px down. If the browser has a height of 400 pixels, it pulls the 400px footer down the page.

I would like to get the same behavior in Safari as possible in Firefox?

The main code I use for this:

<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 glad if the solution requires hacking ... it should only work in Safari

+5
3

Chrome ( , Safari), ...

<!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>

, media="print". ALA.

+9

, . . html 100%, Chrome Safari.

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

More articles:


All Articles