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

我想将页脚添加到HTML页面，该页面将在打印时在所有页面上重复。我已设法通过这个代码来实现这一点：添加页脚以打印网页并设置页边距

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

但现在我有这个款会在复印件 enter image description here

根据本Mirosoft article其余顶部的问题，这应该工作了我：

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

但它没有，它不会改变任何想法？

2011-09-16 Reina

这里是一个工作的解决方案，CSS是这样的：

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

一切都需要包含在一个单独的div与这个CSS

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

这工作完美！

2011-10-02 23:05:37 Reina

如何添加一些z-index？看来，页脚覆盖末段也可以尝试使用

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

2011-09-16 02:18:19 Theodore

这不是重写它，它坐在它的顶部，因为它位于顶部，您的答案不会帮助不幸 – Reina

确保为主要内容的容器，使房间页脚。举例来说，如果您的标记看起来是这样的：

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

你会想一些CSS是这样的：

#content {margin-bottom:4in}

2011-09-16 03:59:58

有1个容器div包含多个页面，我不控制其中的东西数量，这一切都是动态的... – Reina

无论使用何种特定标记，您都需要在页脚的底部留出空间 - 这就是为什么它放在您的内容上。对于这种情况，我经常把所有内容都放在'

content here

'中。 –

回答