固定粘性页脚仅用于上一页

问题描述 投票:0回答:4
我拥有的是一个可以是

big

small有时只能在一页上,有时可能会成长为10页,因此。 这里是示例代码:

<table>

div{ position:relative; height:100vh; } .table-blue{ width:100%; background:lightblue; } .table-blue td{ padding:5px 10px; } .table-blue-fotter{ position: absolute; bottom: 20px;/* for bottom gap */ left: 0px; width:100%; background:gray; } @media print { .table-blue-fotter{ position: fixed; bottom: 20px; left:0px; width:100%; background:gray; }



tofilestection for Property检查 - 这对我有用。但是,如果桌子长时间,故事将变为this

在第二个视图中,第一个视图在

print视图中,页脚出现在每个页面上。 所以我想要的是,无论内容高度如何 仅在lastpage

为修复程序而hop。
    
update以下方式: <div> <table class="table-blue"> <tr> <td>one</td> <td>one test</td> </tr> <tr> <td>two</td> <td>two test</td> </tr> <tr> <td>three</td> <td>three test</td> </tr> </table> <table class="table-blue-fotter"> <tr> <td>one</td> <td>one test</td> <td>one test</td> </tr> <tr> <td>two</td> <td>two test</td> <td>one test</td> </tr> <tr> <td>three</td> <td>three test</td> <td>one test</td> </tr> </table> </div>

在您的CSS中,从媒体类型中删除

<table>

。这导致页脚出现在每个页面上。 Checkout Https://jsfiddle.net/ur6d1h21/12/enter image description here

I与打印样式表具有同样的问题,该图表具有一个具有标头和页脚的页面的页脚。当只有一页时,它起作用。当HTML打印多个页面时,页脚在每个页面上保持粘性。标题仅应在第一页上,页脚应在最后一页。我在这里找到了一个解决方案: CSS分类媒体:最后一页Selector


在您的内容之后输入页脚,然后给它一个
css printing html-table stylesheet
4个回答
5
投票
(底部:0;始终是元素实际页面的底部。)。 还要添加一个

CSS

以防止重叠。
@media print {
  .table-blue-fotter {
    position: static; /* <-- Key line */
    bottom: 20px;
    left: 0px;
    width: 100%;
    background: gray;
  }

0
投票

我遇到了相同的问题,对我有用的是为完整内容设置白色背景颜色,然后用z -index应用@Media打印样式:-1.
这里是一个简单的例子:


0
投票

0
投票


最新问题
© www.soinside.com 2019 - 2024. All rights reserved.