将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％的父母，但是，父母不是百分之百的屏幕。这会导致侧边栏比您想要的短。我相信这是由你的行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 是导航栏的默认高度。