如何判断 HTML 元素是否已超出页面底部？答案

【问题标题】：How do I tell if an HTML element has gone off the bottom of a page?如何判断 HTML 元素是否已超出页面底部？
【发布时间】：2010-10-20 14:55:22
【问题描述】：

我有一个系统，它获取动态数据，将其放入 HTML 中进行布局，然后将其转换为 PDF。但是我遇到的问题是，如果一个元素对于剩余的页面空间变得太大或将其他东西从底部推开，我该如何检测到这一点并将元素自己移动到下一页的正确位置？（目前它妨碍了页脚元素。）

有什么想法吗？

【问题讨论】：

您将不得不提供更多详细信息。你用什么来生成PDF？您是否有任何大到足以跨越多个页面的元素？

标签： html layout pdf-generation paging

【解决方案1】：

您是否考虑过只为数据编写两个视图？

这将允许您解决 PDF 版本上的 PDF 问题并解决 HTML 版本上的任何 html 问题。

编辑：由于 HTML 本身没有“页面大小”的真正概念，除了它自己的视口（通过 javascript）之外，这将是困难的。

您可以使用 javascript 找出给定 DOM 元素的计算高度：

document.getelementById("anElement").clientheight

然后如果您知道给定页面中的像素数，则可以根据需要添加换行符以将其向下推（如果它太大）。

【讨论】：

【解决方案2】：

您必须跟踪页面上所有项目（甚至是动态项目）的特定高度，并确定何时需要插入分页符。

【讨论】：

【解决方案3】：

根据您的问题，我假设您对所有内容元素都使用静态定位（位置：绝对）？

如果您的内容中断了 HTML 中的页脚元素，那么您很有可能可以通过让 HTML 在所有内容下呈现页脚来解决此问题，就像在 HTML 中通常所做的那样。

不过，如果您能描述如何将 HTML 转换为 PDF，那将非常有帮助。

【讨论】：

【解决方案4】：

猜测：我/我们正在使用winover libraries (wnvhtmlconvert.dll) 进行转换。这些位置不是绝对的（页眉和页脚除外），因为如果它们上方的元素展开，它们需要向下移动。这一切都需要是动态的，因为元素的内容会随着用户输入而变化。每个元素可能需要拆分或移动，具体取决于“页面”上有多少可用空间。

扎克：我正在创建 HTML 以便将其转换为仅用于模板布局的 PDF。 HTML 将永远不会被看到。

【讨论】：

【解决方案5】：

我会去掉你页脚的绝对定位，让它在内容之后流动。

如果您将其呈现为一个大页面，则 PDF 可以在需要的地方分页。

【讨论】：

这不允许我们标记页面的页脚。不幸的是，这是一项要求。

【解决方案6】：

我假设您可以控制生成的 html 并且可以在那里进行一些更改。您需要凭经验确定 pdf 的确切高度和宽度。您还需要确定一个 html 页面将填充的 pdf 页面的最大数量。

基本计划是将 html 内容放在它自己的包含 div 中，并为您可能填充的许多页面重复该 div。然后每个 div 将被设置样式和大小以适应一个页面，并隐藏溢出（我们可以将每个 div 视为一个“窗口”）。重复的 div 将改变它们的内容，以便内容的不同部分在窗口中。在以下示例中，我将假设 pdf 页面尺寸为 500 像素 x 500 像素（我知道这是不现实的），内容将占用的最大页面数为 3，并且您的 html 正在由 pdf 呈现符合标准的转换器。

<!DOCTYPE html>
<html>
<head>
  <title>PDF Pagination Example</title>
  <style>
    .header {background:blue; height:25px}
    .footer {background:green; height:25px}
    .window {height:500px; width:500px}
    #window1, #window2, #window3 {height:450px; overflow:hidden}
    #spacer2 {height:0; margin-top:-450px}
    #spacer3 {height:0; margin-top:-900px}
    li {font-size:30px; padding:10px}
  </style>
</head>
<body>

<div class='window'>
<div class='header'>A header</div>
  <div id='window1'>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
  </div>
<div class='footer'>A footer</div>
</div>

<div class='window'>
<div class='header'>A header</div>
  <div id='window2'>
  <div id='spacer2'></div>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
  </div>
<div class='footer'>A footer</div>
</div>

<div class='window'>
<div class='header'>A header</div>
  <div id='window3'>
  <div id='spacer3'></div>
    <ol>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
      <li>Content of variable height that may or may not overflow.</li>
    </ol>
</div>
<div class='footer'>A footer</div>
</div>

</body>
</html>

字体大小为 30 像素时，内容在两页之间拆分。如果将字体大小增加到 50 像素，内容将散布以填满所有三个。

最后一块拼图是一点 javascript。您将需要编写一个 sn-p 来计算内容的高度并在每个窗口的底部添加填充，这样您就不会像示例中那样被截断。 javascript 还应该将没有内容的窗口设置为显示：无。我不确定这是否是您正在寻找的 css，所以我不会解决 javascript，但我也确信如果您需要帮助，您可以在 SO 上找到它：)。

【讨论】：

这是迄今为止最好的解决方案，但是如果该部分在结构上很大（例如，一个具有动态添加的行数的表）那么这将不起作用，即使它确实像我之前所说的那样HTML 本身从未在浏览器中运行。

【解决方案7】：

考虑一些 CSS 打印属性可能会有所帮助，但如果没有进一步的信息就很难判断

http://www.w3schools.com/Css/css_ref_print.asp

【讨论】：

【解决方案8】：

我发现通过使用 WebBrowser 控件并检查相关元素的 OffsetRectangle.Bottom 属性，我可以判断它是否低于页脚的顶部然后我可以判断元素是否溢出以及溢出了多少。

无论如何，谢谢你们的帮助。

【讨论】：