css 打印时将页脚置于底部页面

6ojccjat 于 2023-03-20 发布在其他

关注(0)|答案(3)|浏览(186)

我花了好几天时间想办法解决这个问题：
我有一个报告（完整的HTML5 + CSS3），有几页。报告分为几个部分，每个部分都有一个页眉、一个内容和一个页脚。因此，一个部分的基本组成如下：

<section>
  <header></header>
  <div>CONTENT</div>
  <footer></footer>
</section>

问题是，在print区域（Ctrl + P）中，页脚出现在内容结束之后（见图1），而它必须停留在部分的底部（见图2）...
我不是一个真正的前端大师，这已经成为一个痛苦的实现！你能帮助我吗？谢谢！

图一：

图二：

css

来源：https://stackoverflow.com/questions/46830251/place-footer-on-bottom-page-while-printing

3条答案

按热度按时间

vlju58qv1#

你应该为页脚使用绝对位置

header{
  background-color:yellow;
  height: 50px;
}

footer{
  background-color:red;
position: absolute;
    left: 0;
    bottom: 0;
    height: 50px;
    width: 100%;
    overflow:hidden;
}

<section>
  <header>Header</header>
  <div>CONTENT</div>
  <footer>Footer</footer>
</section>

赞(0）回复(0）举报 2023-03-20

3z6pesqy2#

第一步：在页脚上加上足够的上页边距，使其能够跳转到下一页。如下面的例子所示，2页就足够了
第二步：通过给 Package 器一个负的边距和页脚位置的相对位置和底部来向后移动页脚：$高度
步骤3：防止下一个内容分页，因为您已经使用边距强制分页。
超文本：

<div class="article">
    <div class="content"><pre>
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
    </pre></div>
    <div class="footer">Stick to the bottom!</div>
</div>
<div class="article">
    <div class="content"><pre>
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
CONTENT CONTENT
    </pre></div>
    <div class="footer">Stick to the bottom!</div>
</div>

CSS：

$height: 50px;
$border: 1px;
body {
    margin:0;
    padding:0;
}
.article {
    page-break-after: avoid;
    >.footer {
        position: relative;
        height: $height;
        border: $border solid black;
    }
    pre {
        margin: 0;
    }
}
@page {
    size: a4;
}
@media print {
    .article {
        margin-bottom: calc(0px - $height - 4*$border);
    }
    .footer {
        bottom: calc($height + 4*$border); //border pixel
        margin-top: 594mm; //double of a4 page size
    }
}

赞(0）回复(0）举报 2023-03-20

djmepvbi3#

你可以这样说：

@media print {
    #footer {
        position: absolute;
        bottom: 0;
        display: none;
    }

    @page: last {
        #footer {
            display: block;
        }
    }
}

赞(0）回复(0）举报 2023-03-20

我来回答

css 打印时将页脚置于底部页面

3条答案

相关问题

热门标签

最新问答