Menu
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
701
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.
125
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
