HTML垂直导航栏到页脚的高度

当屏幕尺寸大于768px时，我有这种布局：

但我希望垂直导航栏的高度达到页脚，即使在调整屏幕大小时也是如此。 这就是我想要的：

背景色明显

这是html文件和css文件

文章{
文本对齐：左对齐；
}
标题{
背景：黑色；
颜色：白色；
填充：10px；
文本对齐：居中；
}
导航{
背景：#eee；
填充：10px；
文本对齐：居中；
}
保险商实验室{
列表样式类型：无；
填充：0；/*Tolgo il padding da ul*/
}
李阿{
显示：块；/*每个里加i填充的Separo*/
填充：8px 16px；
颜色：#000；/*Rimuovo il classico colore viola del link*/
文字装饰：无；/*rimuovo la sottilineatura del link*/
}
li a:鼠标悬停{/*Cosa fare quando il mouse si trova sopra*/
背景色：#555；
颜色：白色；
}
页脚{
背景：#aaa；
颜色：白色；
填充：0px；
}
img{
填充：10px；
高度：505px；
宽度：829px；
}
/*每一处理量为768px*/
@介质和全部（最小宽度：768px）{
导航{
文本对齐：左对齐；
最大宽度：200px；
浮动：左；/*Sposto il contenuto a destra*/
}
文章{
左边距：250像素；
}
}

指数
指数

将导航的高度设置为当前屏幕大小的高度，我很确定这会起作用

nav {
background: #eee;
padding: 10px;
text-align: center;
height: 100vh;
}

---

我会将

nav

和

文章

包装在

main

标签内，并给它

display:flex

，它将取最高的高度，并从

nav

中删除

浮动

，只要你默认使用

dispaly:flex

flex-direction:row

它们将彼此相邻

<main>
 <nav></nav>
 <article></article>
</main>

指数

不工作，导航栏高度不高于页脚。你能编辑我的问题吗？编辑代码片段，然后运行，看看你的答案是否有效。测试！太好了，这正是我想要的。我花了几个小时寻找解决办法。非常感谢：）@Chuck94不客气，我们在这里互相帮助；）很乐意帮忙