Fe-interview: [html] 第43天 如何让元素固定在页面底部？有哪些比较好的实践？

[haizhilin2013]

第43天 如何让元素固定在页面底部？有哪些比较好的实践？

[AnsonZnl]

直接使用position:fixed;就可以

*{
  margin:0;
  padding:0;
}
body{
  height:2000px;
}
div{
  width:100%;
  height:30px;
  position: fixed;
  bottom:0;
  text-align:center;
  line-height:30px;
  background: #00CCCC;
}

案例：https://codepen.io/ansonznl/pen/OYoXjw?&editable=true

[jiamianmao]

这个是在结构的底部还是视图的底部 ，视图底部就是 fixed，结构的底部就是 sticky footer 布局咯~

[dangjian]

这个题目应该是实现这一的情况的

1. 当页面没有滚动条时候，元素固定在页面底部
2. 当页面出现滚动条时候，元素在页面内容的底部

[hayahayao]

sticky footer布局：当头部区块和内容区块内容较少时，页脚能固定在屏幕的底部，而非随着文档流排布；当页面内容较多时，页脚能随着文档流自动撑开，显示在页面的最底部

使用flex布局实现

.wrapper {
    display: flex;
    flex-direction: column;
    overflow: auto;
}
.content {
    flex: 1;
}
.footer {
    flex: 0;
}

[canwdev]

考察了 Sticky Footer 布局，参考：Sticky Footer，完美的绝对底部

[renqi1996]

移动端使用position:fixed的时候，有时候会出现点击输入拉起键盘时，按钮位置被顶上去，输入完成收起键盘后，位置依旧存在问题的情况

[blueRoach]

• {
  position: fixed;
  bottom: 0;
  }

-

//在body下设置position: relative; padding-botton: footer的高度/height: calc(100% - footer的高度)
{
position: absolute;
bottom: 0;
}

• .wrapper {
  display: flex;
  flex-direction: column;

}
.content {
flex: 1;
}
.footer {

}

[MrZ2019]

直接使用position:fixed;就可以

*{
  margin:0;
  padding:0;
}
body{
  height:2000px;
}
div{
  width:100%;
  height:30px;
  position: fixed;
  bottom:0;
  text-align:center;
  line-height:30px;
  background: #00CCCC;
}

案例：https://codepen.io/ansonznl/pen/OYoXjw?&editable=true