如何将一些样式应用于打印页面上的第一个和最后一个元素？答案

【问题标题】：How to apply some styles to first and last elements on a print page?如何将一些样式应用于打印页面上的第一个和最后一个元素？
【发布时间】：2013-07-05 18:08:52
【问题描述】：

我有以下假人code：

<!doctype html>
<html>
  <head>
    <style>
      p {font-size: 20px;}
    </style>
  </head>
  <body>
    <script type="text/javascript">
      window.onload = function () {
        var body = document.getElementsByTagName('body')[0],
            p = document.createElement('p'),
            el;

          p.style.height = '20px';
          p.innerText = 'Some Test';

        for (var i = 0, len=30; i<len; i++) {
          el = p.cloneNode(true);
          body.appendChild(el);
        }
      };
    </script>
  </body>
</html>

渲染了一些

元素和页面预览如下所示：

我需要为第一个和最后一个元素添加边框，如下所示：

是否可以使用 CSS 制作并在 webkit 中工作？

编辑：致所有建议以下 css 的人

p:nth-child(1){
 border-top : solid 1px gray;
}
p:last-child{
   border-top : solid 1px gray;
}

或

p:first-child {border-top : solid 1px gray;}
p:last-child {border-bottom : solid 1px gray;}

这对我不起作用，因为它适用于所有页面并且看起来像这样：

我需要在 chrome 中工作

【问题讨论】：

另一种方法是计算您在一页中显示的ps 的数量并使用:nth-child() 选择器。
如何计算？如何获取打印页面的高度？
如果不是像 Chrome 这样的 webkit 浏览器，我会提出一个解决方案，在打印的每个页面的顶部和底部添加边框。对此感兴趣？

标签： javascript css printing page-break-inside

【解决方案1】：

您可以使用两个容器，将一个放在页面顶部，另一个放在底部。这些容器必须放在position:fixed 中，它们将打印在每一页中。这将适用于 Firefox、Opera 和 Internet Explorer，但不适用于 webkit 浏览器。

Demo here

经过几次测试，我认为您的 CSS 的最佳值如下：

#top {
  height: 2px;
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  border-bottom: 1px solid #000;
}
#bottom {
  height: 2px;
  position: fixed;
  width: 100%;
  left: 0;
  bottom: 1px;
  border-top: 1px solid #000;
}
p {
  padding-top: 20px;
}

和你的 HTML：

<div id="top"></div>
<div id="bottom"></div>
<p>abc</p>
<p>abc</p>
.....

【讨论】：

@Erik 在 FF 和 IE 中对我来说很好用。查看这个 html 文件并打印出来：dl.dropboxusercontent.com/u/68296155/print.html
Firefox、Opera和IE有同样的bug
@Erik 这不是错误！我设置了top:1px。如果您设置top:0（或负值）并在p 上添加padding-top:20px 或height:20px（就像您的OP 一样），那么您会看到边框不会在p 上重叠。跨度>
顶部：1px？我是否需要设置 p 位置：绝对？
@otinanai：因此水平行只是固定在页面的顶部和底部。我认为 OP 希望它们恰好位于页面的第一项/最后一项之上/之下？

【解决方案2】：

更复杂的解决方案是计算每个用户的可查看页面高度（JavaScript、jQuery 等）并检查有多少项目适合一个页面。之后，您可以设置所需元素的样式（nth-child(x)）。不是最好的解决方案，但如果您有具体的要求（作为某个浏览器、操作系统等）可能会起作用

编辑：

可能的解决方案是：http://jsfiddle.net/VKDVd/

HTML: 只是几个占位符 div...注意你已经设置了你的文档类型（否则 $(window).height() 将无法正常工作！）

JavaScript/jQuery：

$(document).ready(function () {

    // when including images in your side you should use $(window).load(function() {[...]} to make sure they are completely loaded before the script calculates the heights

    var pageHeight = $(window).height(); // JS-only and IE-compatible solution see my answer
    var sumElementHeights = 0;
    var count = -3; // ensures that the black border is inside the viewport

    for (var i = 0; i < $('div').length && sumElementHeights < pageHeight; i++, count++) {
        sumElementHeights += $('div').eq(count).height(); // sums up the div heights
    }

    $('div').eq(0).css('border-top', '10px solid black');
    $('div').eq(count).css('border-bottom', '10px solid black');
    // you could add a loop here for each page individually...       
});

PS：如果视口大小发生变化（例如，如果用户调整浏览器窗口的大小），您还可以添加更多代码来更新 div 边框。

PPS：您也可以玩弄 count 的数字 - 因为它肯定取决于您添加到元素的边框。

【讨论】：

我如何知道可查看的页面高度？
使用 jQuery 时：$(window).height(); --> 返回浏览器视口的高度（来源：api.jquery.com/height）
在简单的 JavaScript 中你可以使用 var height = window.innerHeight;或 var height = document.getElementsByTagName('body')[0].clientHeight; （对于 IE）
@ШтефанСуркамп 如果每一行没有特定的高度怎么办？除了可打印页面的高度之外，您还需要一个脚本来计算每一行的高度。
@otinanai：是的，所以？您可以使用我的第二条/第三条评论中提到的函数来计算“页面高度”。相同的函数适用于元素，因此您可以将每个函数相加得到总和。

【解决方案3】：

如果您不关心旧浏览器。那么这对你有用...

@media print
  {
      p:nth-child(1){
          border-top : solid 1px gray;
      }
      p:last-child{
          border-bottom : solid 1px gray;
      }
  }

但是如果你想让它在旧浏览器（尤其是 IE）上工作，你就必须使用一些 JS 技术。

【讨论】：

这不起作用 - nth-child 将选择 其父级的第 n个个子级，而不是打印页面。

【解决方案4】：

试试first-child 和last-child。

例如，

p {font-size: 20px;}
p:first-child {...} /* Add your desired style here */
p:last-child {...} /* Add your desired style here */

【讨论】：

IE8 及以下版本不支持此项。
小旁注：这在旧版 IE 中不起作用（不确定 IE9 是否支持）。如果需要，您需要更多的 javascript 解决方案
另外，不确定如何支持 first-child，可以替换为 bij nth-child(1)
不幸的是，它适用于所有页面的样式，但我需要每个页面
jsfiddle.net/FDD5P - @Erik 它将样式应用于 OP 中提到的第一个和最后一个元素