Question

我正试图在每个标签上都有100％高度的页面上粘贴页脚。我的问题是，如果内容大于显示，我向下滚动，则页脚不再位于页面底部。页脚停留在这样的位置：Picture of the footer

这是一个例子:(抱歉这是错误的链接..） http://jsfiddle.net/qt3m1p4c/

<html style:"height: 100%">
   <body style:"height: 100%">
        A lot of Content
   </body>
   <footer style:"position: absolute; bottom: 0;"> 
        Sticky Footer 
   </footer>
</html>

如果没有删除高度属性，有人无法解决这个问题吗？

Answer 1

你需要设置位置：固定到你的页脚，这意味着页面上发生的任何事情，这个元素将站在同一个地方，here your code with changed position

Your system information:

Cordova CLI: 7.0.1
Ionic Framework Version: 3.3.0
Ionic CLI Version: 2.0.0

Answer 2

将页脚置于内容包装器中并按如下方式更改CSS：

.pageContentWrapper {
    padding-bottom:100px;
    min-height: 100%;
    position: relative;
    box-sizing: border-box;
}
.footer {
    position: absolute;
    [...]
}

这是一个小提琴:(已编辑，我忘了先添加box-sizing: border-box;）：http://jsfiddle.net/uc6y5dhs/1/

在100％高度的网站上的粘性页脚

2 个答案: