Question

我试图将元素放在页面底部进行打印，但是当我将打印机或PDF发送给它时它们会出现在顶部：

我的CSS是：

@page 
{
    size: A4;
    margin: 0;
    /*page-break-before: always;*/ 
}

@media print 
{
    .page 
    {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        /*page-break-after: always;*/
        position: relative;
    }
}

.lcp-page-number
{
    position: absolute;
    bottom: 50px;
    right: 50px;
    font-size: 0.85em;
}

我的观点：

<div class="page">
    <div class="lcp-page-number">Página @PageNumber/@PageTotal</div>
</div>

在视图中，一切正常，但是当我进行打印时，所有内容都会显示在页面顶部，为什么？

感谢。

Answer 1

.lcp-page-number超出了您的打印样式块：

@media print 
{
    .page 
    {
        margin: 0;
        border: initial;
        border-radius: initial;
        width: initial;
        min-height: initial;
        box-shadow: initial;
        background: initial;
        /*page-break-after: always;*/
        position: relative;
    }

    /*Needs to be with .page, as you set position:relative only within this print block*/
    .lcp-page-number
    {
    position: absolute;
    bottom: 50px;
    right: 50px;
    font-size: 0.85em;
    }
}

将绝对位置放在MVC视图中的@media打印类中

1 个答案: