Question

我正在尝试将div（页脚）元素放在打印页面的底部。在Firefox中，这工作正常，div将位于打印页面的底部。

然而，在Safari中，如果浏览器窗口不是很高，页脚会向上移动打印的页面。例如。如果浏览器窗口高度为200px，那么页脚将在打印输出上下降约200px。如果浏览器的高度为400px，则会将页脚向下绘制400px。

我想在Safari中获得与Firefox相同的行为，如果可能的话？

我使用的基本代码是：

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

编辑：如果解决方案需要黑客攻击，我很高兴...它只需要在Safari中工作

Answer 1

我刚刚在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上的Going to Print。

Answer 2

这是我使用的代码。注意我将html和身高都设置为100％，这是Chrome和Safari所需的。

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

Answer 3

你试过这个版本吗？

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

我知道它适用于浏览器，但不确定打印。

在safari中打印页面底部的页脚

3 个答案: