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

Question

我已阅读此处寻求页脚帮助的不同帖子；但不幸的是，我在这里没有看到任何对我有帮助的东西。

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

目前我的页面和代码是：

fixed bottom, overlapping nav

<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>

如果我删除“fixd-bottom”；页脚宽度修复；但随后页脚浮动到页面顶部，如下所示：

Floating footer proper width

我还附上了我的最终目标图片；我已经屏蔽了个人内容。 End Goal 我试过：

相对于底部 0 的位置
留边距（尽管将页脚移到上方；在查看移动视图时应该没有边距的地方搞砸了。（不确定我是否应该进行媒体查询并使用此选项）
使用 mb-0 的绝对位置
其他想法，但想不起来了我试过的。

我正在使用 Bootstrap 4.5.2

在 Blazor 中构建此应用

感谢大家的帮助。在过去的 2 个小时里，我一直在谷歌上搜索并尝试成功。

Answer 1

您正在寻找 position: fixed;

An element with position: fixed; is positioned relative to the viewport, which means it always stays in the same place even if the page is scrolled. The top, right, bottom, and left properties are used to position the element.

A fixed element does not leave a gap in the page where it would normally have been located.

来源@https://www.w3schools.com/css/css_positioning.asp

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

I need assistance in updating my footer to be bottom fixed without overlapping my left hand nav bar

css

footer

bootstrap-4

blazor