Css 我需要帮助更新我的页脚底部固定，而不重叠我的左手导航栏

我读过这里的不同帖子，请求页脚帮助；但不幸的是，我在这里没有看到任何有助于我的东西

我正在构建一个web应用程序，尝试将页脚固定到页面底部，而不与左侧的导航栏（橙色栏）重叠

目前我的页面和代码是：

欢迎光临


我还附上了我的最终目标形象；我已经屏蔽了个人内容。
我试过：

相对于底部0的位置
左边距（虽然会将页脚移到另一边；但在移动视图中不应有边距时，它会出错。（不确定是否应该进行媒体查询并使用此选项）
位置绝对值为mb-0
其他想法，但无法回忆
我已经试过了
我正在Blazor中使用Bootstrap 4.5.2构建此应用程序

谢谢大家的帮助。过去两个小时我一直在谷歌上搜索并尝试成功。
您正在寻找
职位：固定；

具有位置的元素：固定的；相对于
视口，这意味着即使
页面被滚动。使用顶部、右侧、底部和左侧属性
来定位元素

一个固定的元素不会在页面中留下一个空白
通常已经找到了

Source@
谢谢；这帮助我确定了我做错了什么。我的部分问题是我认为行中的行太多了。我认为我在逻辑思维上做得不对。
<div class="container-fluid">
        <div class="HeaderBar row">
            <div class="col-md-12">
                <img src="images/systemslogo.png" />
            </div>
        </div>
        <div class="FeatureBar row">
            <div class="col-md-12">
                <p>Welcome</p>
            </div>
        </div>
        <div class="row min-vh-100">
            <div class="navbar col-md-1" style="background-color: #f78a00;">

            </div>
            <div class="col-md-11">
                <div class="row">
                    <div class="col-md-12">
                        <AlertSuccess/>
                        @Body
                    </div>
                </div>
                <div class="row fixed-bottom" style="background-color: #CCCCCC;"> 
                    <div class="col-md-12">
                        <p>Footer</p>
                    </div>
                </div>                
            </div>
        </div>
    </div>