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

Question

我想在HTML页面中添加一个页脚，该页面将在打印时在所有页面上重复。我已通过此代码实现了这一目标：

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

但是现在我有一个问题，这个段落在副本的其余部分之上

根据Mirosoft article的说法，这对我有用：

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

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

Answer 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;
}

这完美无缺！

Answer 2

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

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

Answer 3

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

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

你想要一些像这样的CSS：

#content {margin-bottom:4in}