Css 媒体打印页脚

Question

我正在尝试打印我的网页作为报告。我已经为屏幕完成了 css，当我按 CTRL+P 打印它时，我已经完成了不同的打印模式。

我的问题是当我有 2 页时，页脚不会移动到第 2 页底部。

我该怎么做？

css:

#footer{
   position:absolute;
   bottom:0%;
   width:100%;
   height:60px;   /* Height of the footer */
   border-bottom: 1px solid black;
   border-top: 1px solid black;
}
#total{
    bottom:85%;
    float:right;
    text-align:right;
    position:absolute;
    margin-left:62%;
    margin-bottom:2%;
    border-left: 1px solid black;
    border-top: 1px solid black;
    border-right: 1px solid black;

}

#custsign{
    margin-left:60%;
    margin-top:-10%;
    padding-top:3%;
}
#compsign{
    padding-top:0.3%;
    margin-left:80%;
    margin-top:-2.4%;
}

/*#grid{
    padding-bottom:30%;
}*/

aspx:

 <div id="footer">
       <div id="total">
        <asp:Label ID="SubLabel" runat="server" Text="Sub Total: " ></asp:Label>
        <asp:Label ID="SubText"  runat="server" Text="" ></asp:Label>
        <br />
        <asp:Label ID="DiscLabel" runat="server" Text="Discount: " ></asp:Label>
        <asp:Label ID="DiscText"  runat="server" Text="" ></asp:Label>
        <br />
        <asp:Label ID="VatLabel" runat="server" Text="V.A.T.: " ></asp:Label>
        <asp:Label ID="VatText"  runat="server" Text="" ></asp:Label>
        <br />
         <asp:Label ID="TravelLabel" runat="server" Text="Travel Exp.: " ></asp:Label>
        <asp:Label ID="TravelText"  runat="server" Text="" ></asp:Label>
        <br />
        <asp:Label ID="CurrencyLabel" runat="server" Text="" ></asp:Label>
        <asp:Label ID="TotalLabel" runat="server" Text="Amount Due: " Font-Bold="true"></asp:Label>
        <asp:Label ID="TotalText"  runat="server" Text="" ></asp:Label>
            <br />
           </div>

            <asp:Label ID="ItemsLabel" runat="server" Text="Total No.Items: " ></asp:Label>
        <asp:Label ID="ItemsText"  runat="server" Text="" ></asp:Label>
        <br />
           <asp:Label ID="PrevBalanceLabel" runat="server" Text="Prev Balance: " ></asp:Label>
        <asp:Label ID="PrevBalanceText"  runat="server" Text="" ></asp:Label>
        <br />
         <asp:Label ID="NewBalanceLabel" runat="server" Text="New Balance: " ></asp:Label>
        <asp:Label ID="NewBalanceText"  runat="server" Text="" ></asp:Label>

               <div id="custsign">
           <asp:Label ID="CustomerSignLabel" runat="server" Text="Customer" Font-Bold="true"></asp:Label>
                   </div>
                <div id="compsign">
         <asp:Label ID="CompanieSignLabel" runat="server" Text="Companie Ltd" Font-Bold="true"></asp:Label>
            </div>
          </div>

示例文件：

更新 position:fixed

Answer 1

您可以在您的#footer 选择器上将 position: absolute 更改为 position: fixed。

<style>

    @media screen {
        #footer {
            position: absolute;
            /*Other styles...*/
        }
    }

    @media print {
        #footer {
            position: fixed;
            bottom: 0;
            /*Other styles...*/
        }
    }

</style>

此更改将使您的#footer 在每一页上重复出现。

Answer 2

如何使用本示例的代码？

Make an Editable/Printable HTML Invoice

Css 媒体打印页脚

Css footer on media print

css

asp.net

printing

footer