[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 {

}

[smile-2008]

直接使用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

[zxcdsaqwe123]

position：fixed；
bottom：0；

[never123450]

要让元素固定在页面底部，可以使用CSS的定位属性和一些技巧来实现。以下是一些常用的方法和实践：

1. 使用绝对定位（position: absolute）：将元素的定位属性设置为绝对定位，并将底部位置设置为0。这样，元素将相对于其最近的具有相对或绝对定位的父元素定位，并固定在页面底部。例如：

.bottom-element {
  position: absolute;
  bottom: 0;
}

2. 使用固定定位（position: fixed）：将元素的定位属性设置为固定定位，并将底部位置设置为0。这样，元素将相对于浏览器窗口定位，并始终固定在页面底部，即使页面滚动。例如：

.bottom-element {
  position: fixed;
  bottom: 0;
}

3. 使用flexbox布局：使用flexbox布局可以轻松实现元素固定在页面底部。将容器元素的display属性设置为flex，并使用justify-content属性将内容对齐到底部。例如：

.container {
  display: flex;
  justify-content: flex-end;
}

4. 使用sticky定位（position: sticky）：如果您希望元素在滚动到页面底部时保持在底部，可以使用sticky定位。将元素的定位属性设置为sticky，并将底部位置设置为0。例如：

.bottom-element {
  position: sticky;
  bottom: 0;
}

需要注意的是，使用这些方法时，确保元素的父元素具有足够的高度以容纳固定在底部的元素。此外，还要考虑页面布局和其他元素的影响，以确保固定在底部的元素不会遮挡其他内容。

根据具体的需求和设计，选择适合的方法来实现元素固定在页面底部，并根据需要进行适当的样式调整。