仅在媒体打印的最后一页打印页脚

Question

仅在媒体打印的最后一页打印页脚

8

我需要打印多页，并且页脚需要在最后一页底部打印。我已经添加了这样的页脚CSS：

footer {
     display: block;
     width:100%;        
     position:absolute;
     left:0;
     bottom:0px;        
}

问题是页脚打印在第一页，但我需要它打印在最后一页。

- Nikesh Ponnen

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，

- 4dgaurav · Answer 1

使用media="print"，在您的自定义页脚样式中包含一个样式表

<link rel="stylesheet" href="yourpath/footerstyle.css" media="print"/>

或者

嵌入样式，就像HTML中一样

<style>
@media print {
   footer {
    display: block;
    width:100%;        
    position:absolute;
    left:0;
    bottom:0;        
   }
}
</style>

或者

<style type="text/css" media="print">
    footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
    }
</style>

尝试将主体相对定位，页脚绝对定位：

<style type="text/css" media="print">
     body {
        position: relative;
     }
     footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
     }
</style>

或者你可以使用类似这样的东西：

@page:last {
    @bottom-center {
        content: "…";
    }
}

CSS 3分页媒体模块

编辑

<style type="text/css" media="print">
     body {
        position: relative;
        margin: 0;
     }
     .page-section {

        /* Specify physical size of page, margins may vary by browser */

        height: 10 in; /* or give size as per proper calculation of the height of all your pages after which you want footer */
        position: relative;
     }
     footer {
        display: block;
        width:100%;        
        position:absolute;
        left:0;
        bottom:0;         
     }
</style>

将 .page-section 添加到相关的 div / divs 中，根据您想要每页打印的 div 数量添加，或直接添加到 body 标签中。