Bootstrap问题：仅在内容未溢出时填充剩余垂直高度

问题场景 #

当前页面结构如下：

<div class="container px-0">
    <nav class="...">
    </nav>
    
    <div class="row px-3">
    ...content
    </div>

    <div class="row footer-spacer">
        an empty div of height 50px to deal with footer.
    </div>
</div>

<footer class="container page-footer font-small fixed-bottom">
    Footer
</footer>

大部分页面内容长度超过视口，但少数短内容页面中，内容与固定底部footer之间会出现大量空白。尝试过添加vh-100类，但长内容页面末尾会多出不必要的空白；也试过flex布局方案但未生效（使用Bootstrap 4.3版本）。

需求：仅当内容高度小于视口高度时，自动填充内容与footer间的空白；内容超过视口时，不额外增加空白。同时保留container的居中边距，不使用container-fluid。

解决方案 #

通过Bootstrap的flex布局类实现自适应高度：

修改后的页面结构：

<div class="container px-0 d-flex flex-column min-vh-100">
    <nav class="...">
    </nav>
    
    <div class="row px-3 flex-grow-1">
        ...content
    </div>

    <div class="row footer-spacer" style="height: 50px;">
        <!-- 防止内容被固定footer遮挡 -->
    </div>
</div>

<footer class="container page-footer font-small fixed-bottom" style="height: 50px;">
    Footer
</footer>

关键修改说明 #

• 给最外层.container添加d-flex flex-column min-vh-100：将容器设为垂直方向的flex布局，最小高度等于视口高度，确保短内容时容器能撑满视口。
• 给内容所在的.row添加flex-grow-1：让内容区域自动填充容器中除导航、footer-spacer之外的剩余空间，短内容时拉伸填补空白，长内容时随内容自然延伸，不会额外增加高度。
• 保持footer-spacer的高度与footer一致（示例中为50px）：避免长内容时底部被固定footer遮挡。

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