媒体打印上的 Css 页脚

Posted 2023-03-21

【中文标题】媒体打印上的 Css 页脚

【英文标题】：Css footer on media print

【发布时间】：2015-12-14 08:19:21

【问题描述】：

我正在尝试将我的网页打印为报告。当我按下 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>     

示例文件：

更新位置：固定

【参考方案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 在每个页面上重复。

【参考方案2】：

如何使用本例的代码？

Make an Editable/Printable html Invoice