html - 将 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 引起的。

解决方案:

创建一个可用于将最大 View 高度应用于行 div 的类:

.maxVH {
    min-height: 100vh;
}

然后将此类添加到您的行 div:

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

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

解决这个问题的方法是在开发人员的控制台中探索您的元素，看看第一个未扩展到页面 100% 的父元素是什么，然后添加 CSS 使该元素为您提供期望的行为。

希望对您有所帮助。