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

Question

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

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

目前我的页面和代码是：

固定底部，重叠导航

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

如果我删除"；固定底部"；；页脚宽度固定；但是页脚浮动到页面顶部，如下所示：

浮动页脚适当宽度

我还附上了我的最终目标图像；我屏蔽了个人内容。最终目标我试过：

1. 相对于底部0的位置
2. margin left(尽管将页脚移到了上方；当查看移动视图时，它会出错，因为那里不应该有margin。(不确定我是否应该进行媒体查询并使用此选项(
3. 带mb-0的绝对位置
4. 其他想法，但无法回忆我尝试过的

我正在Blazor中使用Bootstrap 4.5.2 构建此应用程序

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

Answer 1

您正在寻找position: fixed;

一个位置为：fixed的元素；相对于视口，这意味着即使页面滚动。使用顶部、右侧、底部和左侧属性以定位元件。

固定的元素不会在页面中留下空白通常已经定位。

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