Question

我想在文档的每个页面上打印不同的页脚（因为我必须显示页码）。

我尝试了这个CSS ，但它将每个页脚都放在另一个上而不是在每个页面上更改：

section {
    page-break-before: always;
    margin-top: 30px;
    page-break-inside: avoid;
}
footer {
    bottom:0px;
    height:30;
    right:0%;
    left:0%;
    position:fixed!important;
    position:absolute;
    width=100%;
    top:expression((0-(footer.offsetHeight)+
(document.documentElement.clientHeight?
document.documentElement.clientHeight:
document.body.clientHeight)+(ignoreMe=document.documentElement.scrollTop?
document.documentElement.scrollTop:document.body.scrollTop))+'px');
    text-align:center;
    visibility:visible;
}

HTML

{{# each array}}
    <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page {{math @index '+' 7 }} </small>
        </footer>
    </section>
{{/each}}

所以最终的HTML会是：

   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 8 </small>
        </footer>
    </section>
   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 9 </small>
        </footer>
    </section>
   <section class="row">
        ...
        <div class="col-xs-12">
           ...
        </div>
        <footer>
            <small>     Page 10 </small>
        </footer>
    </section>

我怎样才能用CSS做到这一点？我不在乎每个浏览器是否支持它，但它必须在Chrome中运行。

由于

Answer 1

如果您可以稍微更改HTML，则可以使用HTML数据属性和css

执行此操作

＆＃13;

small::after {
  content: attr(data-page);
}

＆＃13;

<footer>
  <small data-page="1">This is page number </small>
</footer>

＆＃13;

Answer 2

经过数小时的研究，我发现了如何做到： CSS：

brew reinstall gcc --without-multilib

HTML：

section {
    position: relative; 
    height: 95%;
}

Answer 3

尝试一下：

html：

<div class="divFooter">{{page}}/{{totalPage}}</div>

css：

@media print 
  {
   div.divFooter 
     {
       position: fixed;
       bottom: 0;
     }
  }

设置页脚，但在打印文档中的每个页面与CSS不同

3 个答案: