如何判断 HTML 元素是否已脱离页面底部？

Question

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

有什么想法吗？

Answer 1

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

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

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

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

document.getelementById("anElement").clientheight

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

Answer 2

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

Answer 3

从你的问题来看，我假设你对所有内容元素使用静态定位（位置：绝对）？

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

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

Answer 4

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

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

Answer 5

我会取消页脚上的绝对定位，让它在内容之后流动。

如果将其渲染为一大页，则 PDF 可能会在需要的地方破坏页面。

Answer 6

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

基本计划是将 html 内容放入其自己的包含 div 中，并在您可能填充的任意页面中重复该 div。然后，每个 div 的样式和大小将适合一页，并且隐藏溢出（我们可以将每个 div 视为一个“窗口”）。重复 div 的内容将被移动，以便内容的不同部分位于窗口中。在下面的示例中，我将假设 pdf 页面尺寸为 500px x 500px（我知道这是不现实的），内容占用的最大页面数为 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>

字体大小为 30px 时，内容分为两页。如果将字体大小增加到 50 像素，内容将扩散到填满所有三个。

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

Answer 7

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

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

Answer 8

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

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

如何判断 HTML 元素是否已脱离页面底部？

问题描述投票：0回答：8

8个回答

最新问题

如何判断 HTML 元素是否已脱离页面底部？

问题描述 投票：0回答：8

8个回答

最新问题

问题描述投票：0回答：8