html - 在 MVC View 中的 @media 打印类中绝对定位

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>

在 View 中，一切正常，但是当我打印时，一切都到了页面的顶部，为什么？

谢谢。

Answer 1

.lcp-page-number 在您的打印样式 block 之外:

@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;
    }
}