将 Bootstrap 侧边栏扩展到网页末尾

Question

我正在尝试扩展我网页的红色边栏。目前看起来是这样的：

我将 Bootstrap 与 Flask 结合使用，但我终其一生都无法弄清楚如何让它一直延伸到页面底部。我尝试过使用flex 等等，但似乎没有任何改变。我的代码如下：

我的 HTML 文件：

<div class="container-fluid">
        <div class="row row-offcanvas row-offcanvas-left">
            <div id="sidebar-wrapper" class="col-md-3 col-xs-6 sidebar-offcanvas">
                <nav id="side" class="sidebar-nav">

                    {% block sidebar %}

                    {% endblock sidebar %}

                </nav>
            </div>
            <div id="content-wrapper" class="col-md-9 col-xs-12">
                {% block content %}

                {% endblock content %}
            </div>
        </div>
    </div>

我的 CSS 文件的相关部分：

#sidebar-wrapper {
    overflow: auto;
    padding-left: 0;
}

.sidebar-nav {
    background: darkred;
    min-height: 600px;
    padding-top: 15px;
    padding-left: 15px;
    padding-right: 15px;
    height: 100%;
}

Answer 1

问题：

您看到的是，您的 .sidebar-nav 正在填充其父级的 100%，但是，父级不是 100% 的屏幕。这会导致您的侧边栏比您想要的要短。我相信这是由您的行 div 造成的。

解决方案：

创建一个可用于将最大视图高度应用于行 div 的类：

.maxVH {
    min-height: 100vh;
}

然后将这个类添加到你的行 div：

<div class="row row-offcanvas row-offcanvas-left maxVH">

这将扩展行以匹配视图高度，随后您的侧边栏将扩展以填充它。

您可以通过在开发者控制台中探索您的元素以查看第一个未扩展到 100% 页面的父元素是什么，然后添加 CSS 以使该元素为您提供期望的行为。

希望对您有所帮助。

Answer 2

对我来说，顶部有一个导航栏。添加到 Ryan Gibbs 的回答中，我做了类似的事情：

.maxVH {
    min-height: calc(100vh - 56px);
}

56px 是导航栏的默认高度。