Question

我需要打印多个页面和页脚需要在最后一页底部打印。我已经为这样的页脚添加了css

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

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

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 Paged Media module

修改

<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>

根据您希望div每页打印或直接添加到.page-section标记，将body添加到相关的div / div。

仅在最后打印的页面中打印页脚以进行介质打印

1 个答案: