添加页脚以打印网页和设置页边距答案

【问题标题】：Adding footer for printing web pages and setting margins添加页脚以打印网页和设置页边距
【发布时间】：2011-11-18 08:32:19
【问题描述】：

我想为 HTML 页面添加页脚，打印时将在所有页面中重复该页脚。我设法通过这段代码实现了这一点：

@media print {
    p.note {
        bottom: 0; position: fixed; 
    }
}

但是现在我对这一段放在副本的其余部分上面有一个问题

根据这个 Mirosoft article，这应该对我有用：

@page :first {
    margin-bottom: 4in;
}

但它没有，它没有改变任何东西......任何想法？

【问题讨论】：

标签： html css printing specific-stylesheets

【解决方案1】：

这是有效的解决方案，CSS 是这样的：

@media print {
    p.note {
        display:block;
        bottom:0;
        position:fixed;
        font-size:11px;
    }
}

所有内容都需要使用这个 CSS 包含在一个单独的 div 中

#wrapper {
    position:relative;
    bottom:1in;
    margin-top:1in;
    width:974px;
    margin:0 auto;
}

效果很好！

【讨论】：

【解决方案2】：

添加一些 z-index 怎么样？似乎页脚覆盖了最后一段也尝试使用

@media print {
    p.note {
        bottom: 0; position: fixed;
margin-top:10px; 
    }
}

【讨论】：

它没有覆盖它，它位于它的顶部，因为它位于顶部，不幸的是你的回答没有帮助

【解决方案3】：

确保主要内容的容器为页脚腾出空间。例如，如果您的标记看起来像这样：

<div id="content"><p>Lorem Ipsum Latin et cetera</p></div>
<p class="note">Footer</p>

你会想要一些像这样的 CSS：

#content {margin-bottom:4in}

【讨论】：

1个容器div包含多个页面，我不控制里面的东西，都是动态的...
无论使用何种特定标记，您都需要在底部为页脚腾出空间——这就是为什么它位于您的内容之上的原因。对于这种情况，我经常将所有内容都放在<div id="wrapper">content here</div> 中。

【解决方案4】：

要为页脚文本腾出空间，您可以使用table 和tfoot。使用tfoot>tr 创建一个垫片。将您的页脚文本放在具有position:fixed; 到bottom:0; 的div 容器中。

CSS

table {width:100%;}
@media print {
  tfoot>tr {height:20mm;}
  tfoot div {position:fixed;bottom:0;}
}

HTML

<body>
  <table>
    <thead><tr><td>Page header</td></tr></thead>
    <tbody><tr><td>
      <p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p><p>-</p>
    </td></tr></tbody>
    <tfoot><tr><td><div>Page footer</div></td></tr></tfoot>
  </table>
</body>

【讨论】：