无法为移动设备创建基于Bootstraps粘性页脚的粘性页脚

Question

I am trying to emulate this version of sticky footer done here https://getbootstrap.com/docs/4.1/examples/sticky-footer/ 我正在尝试模拟在此处完成的此版本的粘性页脚https://getbootstrap.com/docs/4.1/examples/sticky-footer/

This is my html code 这是我的html代码

<body>
    @Html.Partial("Navigation/_Navigation")
    <div class="container body-content">
        <div class="content-container">
            @RenderBody()
        </div>
        <footer>
            &copy; @DateTime.Now.Year - Stardocs Services
        </footer>
    </div>
</body>

This is my css 这是我的CSS

html {

}

body {
    padding-top: 50px;
    margin-bottom: 50px;
}

/* Set padding to keep content from hitting the edges */
.body-content {
    padding-top: 20px;
    padding-left: 15px;
    padding-right: 15px;
}

.content-container {

}

/*Footer*/
footer {
    position: absolute;
    bottom: 0;
    left:0;
    width: 100%;
    height: 50px;
    line-height: 50px;
    background-color: #f5f5f5;
}

When I view it in desktop mode it sticks to the bottom just fine. 当我在桌面模式下查看它时，它会固定在底部。 However, when I resize the screen, the bar looks like this : 但是，当我调整屏幕大小时，栏看起来像这样：

I'm not sure how to continue from what I've done. 我不确定如何继续做完的事情。

Answer 1

You need to add 您需要添加

.body-content { 
  min-height: 100vh; 
  padding-bottom: 50px; 
  position: relative;
}

Also, you should remove 另外，您应该删除

body { margin-bottom: 50px; }

无法为移动设备创建基于Bootstraps粘性页脚的粘性页脚

问题描述

1 个解决方案

解决方案1
0 已采纳 2018-09-26 07:03:20

无法为移动设备创建基于Bootstraps粘性页脚的粘性页脚

问题描述

1 个解决方案

解决方案1 0 已采纳 2018-09-26 07:03:20

解决方案1
0 已采纳 2018-09-26 07:03:20