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

时间：2018-09-26 07:00:06

标签： html css

我正在尝试模拟在此处https://getbootstrap.com/docs/4.1/examples/sticky-footer/

完成的此版本的粘性页脚

这是我的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>

这是我的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;
}

当我在桌面模式下查看它时，它会牢牢固定在底部。但是，当我调整屏幕大小时，栏看起来像这样：

enter image description here

我不确定该如何继续做下去。

1 个答案:

答案 0 :(得分：0)

您需要添加

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

此外，您应该删除

body { margin-bottom: 50px; }
相关问题
最新问题