html - 打印 HTML 页面时如何在每个页面中显示页脚

标签 html css

我正在尝试创建一个 html 页面,该页面将用于使用浏览器打印数据。我需要包含一个页脚,它会在打印时显示在底部的每个页面中,我已经开发了以下代码来实现它。

下面的代码工作正常,但问题是当我在 div content 中的内容变得足够长以让用户向下滚动页面时,如果我转到 Google 的打印选项Chrome 并查看打印预览,我可以看到页脚显示在第一页中,但其他页面中没有。但同样的代码在 Firefox 中有效,页脚显示在所有打印页面中(甚至显示在打印预览中)。

你能帮我在使用谷歌浏览器打印时在每页中显示页脚吗?

谢谢:)

<html>
<head>  

 <style type="text/css">
 html {margin:0;padding:0;border:0; overflow-y: scroll;}
 body { font-size:75%;color:#222; font-family: Geneva, Arial, Helvetica, sans-serif;}
 #container {margin:0 auto; height:100%; }
 #content{}
 #footer {position: fixed ; left: 0px; bottom: 0px; right: 0px; font-size:10px; }
 </style>

 </head>

<body>
 <div id="container">
    <div id="content">
       My Contents
    </div>

   <div id="footer">This is my Footer</div>

 </div>

</body>
</html> 

最佳答案

应该有 position: relative 到页脚的父元素 它的父元素是 body 所以把它交给 body 或 container

关于html - 打印 HTML 页面时如何在每个页面中显示页脚,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/12192845/

相关文章:

html - CSS3 过渡宽度属性

html - 如何使高度与高度相适应

javascript - 将鼠标悬停在菜单上时在特定 Div 上显示图标

javascript - 如何刷新/重新加载应用程序/pdf 的嵌入?

html - 是什么导致了这种(黑白和模糊)效果?

css - 如何将文本放在 CSS 图像轮播上?

javascript - 获取要在 div 中显示的默认值

javascript - HTML 5 图像悬停调整大小和重定向

jquery - 动态检查是否显示div,jquery css(显示:none/block)

其他元素的 CSS 百分比