如何填充CSS多列布局中章节列中断前的页面空白？

问题场景 #

我通过CSS多列布局实现书籍分页效果，每一列对应一页，核心代码如下。目前已实现每个章节从新页开始，但章节的最后一页底部会留下未填满的空白。尝试给.chapter-end添加padding-bottom: 100%，但效果不稳定——部分章节会溢出到新列，部分正常。想找靠谱的CSS或JS方法填充章节内容末尾到视口底部的空白。

现有代码 #

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>

解决方案 #

方案一：纯CSS动态填充（利用Flexbox）

给.fdx-chapter设置为flex容器，让内容区和填充区自动分配空间，确保填充区占满剩余高度：

.fdx-chapter {
    break-before: column;
    margin-top: 0;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 75px - 35px); /* 减去容器上下内边距的可用高度 */
}

.chapter-end {
    flex-grow: 1;
    /* 可选：如果需要填充背景色，直接在这里设置 */
    /* background-color: #f8f8f8; */
}

原理：通过flex-grow:1让.chapter-end自动填充章节容器内的剩余空间，章节容器的最小高度设为页面可用高度，即使章节内容不足一页，填充区也会撑满到页底。

方案二：JS计算动态补全空白

如果纯CSS方案因多列布局特性出现兼容性问题，可通过JS计算每个章节最后一页的剩余高度，动态设置填充块高度：

function fillChapterEnds() {
    const chapters = document.querySelectorAll('.fdx-chapter');
    // 计算页面可用高度，对应容器的上下内边距
    const pageAvailableHeight = window.innerHeight - 75 - 35;

    chapters.forEach(chapter => {
        const totalChapterHeight = chapter.offsetHeight;
        const fullPageCount = Math.floor(totalChapterHeight / pageAvailableHeight);
        const lastPageRemainingHeight = pageAvailableHeight - (totalChapterHeight % pageAvailableHeight);

        // 若章节刚好占满整数页，无需填充；否则计算剩余高度
        const fillHeight = totalChapterHeight % pageAvailableHeight === 0 ? 0 : lastPageRemainingHeight;
        
        const chapterEnd = chapter.querySelector('.chapter-end');
        if (chapterEnd) {
            chapterEnd.style.height = `${fillHeight}px`;
        }
    });
}

// 初始化执行，窗口大小变化时重新计算
window.addEventListener('load', fillChapterEnds);
window.addEventListener('resize', fillChapterEnds);

注意：如果章节内容是动态加载的，需在内容加载完成后再调用fillChapterEnds()函数。

内容的提问来源于stack exchange，提问作者alyx