show＆＃34;免责声明＆＃34;在屏幕的底部，但只在第一页打印

Question

我不是网络开发人员，但是可以生成静态HTML报告页面。

该页面需要有免责声明＆＃39;在借款人展示时，在屏幕的底部;但只打印在第一页的底部。

我使用＆＃39;固定＆＃39;位置。它似乎锁定了“页脚”＆＃39;在屏幕的底部罚款：

#footer{
  width: 100%;
  background-color: white;
  position: fixed;
  clear: both;
}

但有两个问题：

1. 它打印在每一页
2. 它会阻止内容（屏幕和打印内容）

请帮我解决这个问题，或者指出正确的方向。

谢谢！

Answer 1

OP没有说他正在使用任何CMS，所以我假设他是从头开始编写HTML代码。回答你的问题：

1。它打印在每一页

我建议使用媒体查询。根据页面在浏览器（屏幕）或打印（打印）中的不同，应用两种不同的CSS规则。这里有两种页脚的情况。

1. 在首页上，无论如何显示页脚。
2. 在其他每个页面上，以浏览器（屏幕）模式显示页脚。

对于第一个，使用id =＆＃34; footer＆＃34;创建一个页脚元素。和以前一样：

<div id="footer"> This is my disclaimer. </div>

然后在css中，像以前一样应用你的样式：

#footer{
  width: 100%;
  background-color: white;
  position: fixed;
  clear: both;
}

这样，无论如何，首页都会有页脚。然后，在每个其他页面上，使用相同的ID，但添加一个类=＆＃34; hideOnPrint＆＃34;像这样：

<div id="footerOtherPage" class="hideOnPrint"> This is my disclaimer. </div>

在你的css中，应用媒体查询来隐藏打印中的这个元素：

@media print{

    .hideOnPrint{
       display: hide;
    }

}

这样，只有在打印时查看页面时，.hideOnPrint上的样式才会生效。详细了解媒体查询here。

2。它会阻止内容（屏幕和打印）

这与您使用的位置样式有关。

position: fixed;

固定意味着元素相对于浏览器窗口卡住了。就像你在其他网站上看到的那些粘性标题一样。页脚显示在底部，无论它是否阻止底层内容。

要解决此问题：只需删除该位置的CSS样式。或者只是将其设置为相对。要了解有关职位的更多信息，请查看此link。