我需要在将页脚固定为底部而不重叠我的左侧导航栏时获得帮助

编程问答 2022-06-12

问题描述

我在这里阅读了其他文章，寻求页脚帮助；但不幸的是，在这里我看不到有任何可以帮助我的东西。

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

当前我的页面和代码是：

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>

如果我删除“固定底部”；页脚宽度固定；但是页脚会像这样浮动到页面顶部：

Floating footer proper width

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

  1. 底端为0的相对位置
  2. 左边距（尽管将页脚移到上方；在移动视图中应该没有边距的地方，它会拧紧。（不确定是否应该进行媒体查询并使用此选项）
  3. 绝对位置为mb-0
  4. 其他想法，但无法回忆 我尝试过的。

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

感谢大家的帮助。我一直在使用Google搜索，并尝试了2个小时，以取得成功。

解决方法

您正在寻找position: fixed;

具有以下位置的元素：固定；相对于 视口，这意味着它始终位于同一位置，即使 页面被滚动。使用top，right，bottom和left属性 定位元素。

固定元素不会在页面上留下空白 通常已经找到了。

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

您处在正确的轨道上，如果您的问题的答案别忘了投票并接受答案，则这是https://codepen.io/amarinediary/pen/GRZwBGY的有效码本

blazorbootstrap-4footer