Question

我正在尝试将我的网页打印为报告。当我按CTRL + P进行打印时，我已经为屏幕做了css而且打印模式不同。

我的问题是，当我有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>

示例文件：

更新位置：已修复

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

2 个答案: