有这样一个需求:
当页面内容高度小于屏幕高度时,Footer固定在屏幕底部;
当页面内容高度大于屏幕高度时,Footer固定在页面底部,即:跟随在内容尾部,滚动条到最底部时看到。
解决方案
第一种:
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 60px;
}
footer {
position: absolute;
bottom: 0;
width: 100%;
height: 60px;
}
第二种
body {
min-height: calc(100vh - 100px);
}
footer {
height: 100px;
}
最外层div减去最底部的高度就OK!!!