如何填充CSS分栏之前的空白，以准确测量内容高度？

Question

我有一个多列 CSS 布局，具有特定的分栏符：

body {
    margin: 0;
    padding: 0;
    overflow: hidden;
}
#fdx-reader {
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    padding: 75px 30px 35px 30px;
    box-sizing: border-box;
    position: relative;
    column-width: calc(100vw - 60px);
    column-gap: 60px;
}
#fdx-reader > * {
    break-inside: avoid;
}
.fdx-chapter {
    break-before: column;
    margin-top: 0;
}

在此 HTML 中：

<div id="fdx-reader">
    <div class="fdx-chapter" data-chapter-id="1">
        <p>Content of chapter 1...</p>
        <div class="chapter-end"></div>
    </div>

    <div class="fdx-chapter" data-chapter-id="2">
        <p>Content of chapter 2...</p>
        <div class="chapter-end"></div>
    </div>
</div>

我遇到一个问题，接受

data-chapter-id

和章节百分比的 JS 函数没有返回正确的列（页码）。

这是因为在我们进入下一栏之前，本章的最后一页没有填满整栏，然后开始下一章：

.fdx-chapter { break-before: column; }

示例：

• 在有两页的章节中，指定导航到章节的 51% 时会保留在第一页，而不是预期的第二页，因为第二页内容仅占据页面的 1/3 左右。
• 但是，如果您指定章节的 80%，它将正确导航到第二页。

如果我手动填充列中的剩余空间，我们的百分比计算就会起作用：

是否有一种编程方式来填充每章的最后一页，从章节内容的末尾到视口的底部？或者，理想情况下，一个 CSS 方法可以做到这一点？

或者我处理这个问题的方式不正确？

Answer 1

或者我处理这个问题的方式不正确？

我怀疑是这样...因为你无法以任何准确度来计算这些东西，特别是考虑到所有不同的屏幕尺寸。

您需要的是一种更智能的方式来跳转到文档的不同位置，也许可以使用哈希值：

假设这是您文档的索引菜单...

<a href="#chapter1">Go to Chapter 1</a>
<a href="#chapter2">Go to Chapter 2</a>
<a href="#chapter3">Go to Chapter 3</a>

在第 3 章的顶部...

<a id="chapter3" href="javascript:window.scrollTo(0,0);">Back to Index</a>

直接导航至章节...

window.location.href = 'index.htm#chapter3';

或者也许我没有正确理解您的需求。