Html 如何使用导航栏下的侧栏填充剩余的视口高度？

这描述了问题：

我想在剩余的视口高度上拉伸侧栏，以便页脚始终可见，而引导4导航栏可以是任何高度。有办法做到这一点吗

---

另一种说法是，当只有内容可滚动时，我根本不希望侧栏滚动。

只需将此样式添加到侧脚元素

.sidebar h3.mt auto

，您需要一直显示它

.sidebar h3.mt-auto {
    position: sticky;
    bottom: 0;
}

---

我会尝试为包含页脚文本的

提供一个类似于

边栏页脚的类。
在CSS中，请给出：

。侧边栏页脚{
位置：粘性；
底部：0；
}

我在您发送的链接中测试了该代码，结果如下：

如果这就是你要找的，请告诉我
 如果您不反对使用网格布局，我可能会这样做：

.main
{
    display: grid;
    grid-template-columns: 10rem 1fr;
    grid-template-rows: 56px 1fr;
    position: relative;
}

.main > *
{   box-sizing: border-box;
    
}

#nav
{ grid-column: 1/3;
grid-row: 1/2;

}

.sidebar
{   grid-row: 2/3;
    grid-column: 1/2;
    height: 100vh;
    position: sticky;
    left: 0;
    bottom: 0;
    top: 0;
}

.content.flex-fill
{   grid-row: 2/3;
    grid-column: 2/3;
    
}

它不是100%，只是你提到了“可变高度”导航。如果您确实知道导航高度是多少，那么在.sidebar类中，您可以将高度更改为类似calc（100vh-NAVHEIGHT）的值。
我希望整个侧边栏在整个视口高度上拉伸。我只是添加了页脚来显示问题。抱歉不清楚。这就是为什么我提到可变高度或反应良好或其他什么。在引导中，此值NAVHEIGHT不存在！NAVHEIGHT只是一个你可以填充任何高度的东西。在您的示例中，它的高度是56px，所以在这种情况下，您需要将其更改为calc（100vh-56px）。但对于一个可变高度的，我只能看到使用JS动态调整它的大小…不是，它根本不可能定义它，在你的浏览器中，导航栏的高度可能是56px，但是在另一个浏览器上它可能是不同的。尤其是导航栏可能会崩溃时。