Flexbox 是一种常用的 CSS 布局方式，可以轻松实现许多常见的布局效果，包括将元素固定在底部。这篇文章总结了使用 Flexbox 实现固定底部元素的技巧，介绍了一些常用的方法和实现方式。
1. 使用 flex 属性实现元素固定在底部
Flexbox 中的 flex 属性可以控制一个元素在主轴方向上的增长方式。如果我们将一个元素的 flex 属性设置为 1，并将其父元素的 display 属性设置为 flex 或 inline-flex，那么该元素就会填充剩余空间并向底部延伸，从而实现固定在底部的效果。
示例代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------------- ---- -------------------------- ------ ------- ---------- - -------- ----- --------------- ------- ------- ------ - -------- - ----- -- - ------- - ------- ----- - --------
容器 div 设置了 display: flex 和 flex-direction: column，使得容器内的元素按垂直方向排列。content div 的 flex 属性被设置为 1，表示该元素将填充剩余空间。同时，footer div 设置了一个固定高度，使得 content div 留出剩余空间，被自动推到页面底部。
2. 使用 absolute 定位实现元素固定在底部
除了 flex 属性，我们还可以使用 absolute 定位来实现元素固定在底部。通过将其 position 属性设置为 absolute，并设置 bottom 和 left 或 right 属性，可以将元素放置在页面底部。
示例代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------------- ---- -------------------------- ------ ------- ---------- - --------- --------- ----------- ------ - ------- - --------- --------- ------- -- ----- -- ------ -- ------- ----- - --------
容器 div 设置了 position: relative，使得其内部元素的 position 属性可以相对于其位置定位。footer div 的 position 属性被设置为 absolute，使得该元素脱离文档流并相对于容器进行定位。同时，bottom、left 和 right 属性被设置为 0，使得该元素与容器左右和底部对齐。
3. 使用固定定位实现元素固定在底部
最后一种实现元素固定在底部的方式是使用固定定位。通过将元素的 position 属性设置为 fixed，并设置 bottom 和 left 或 right 属性，可以将元素粘贴在窗口底部并始终显示在用户视野内。
示例代码如下：
-- -------------------- ---- ------- ---- ------------------ ---- ----------------------------- ---- -------------------------- ------ ------- -------- - ------- ------- - ------- - --------- ------ ------- -- ----- -- ------ -- ------- ----- - --------
在这个示例中，content div 设置了一个比较大的高度，使得页面内容较长。而 footer div 的 position 属性被设置为 fixed，使得该元素与页面底部粘贴并始终显示在用户视野内。
总结
本篇文章介绍了使用 Flexbox 实现元素固定在底部的三种方式：使用 flex 属性、使用 absolute 定位和使用固定定位。这些方法都可以实现类似的效果，但适用的情况和实现方式略有不同。在实践中，我们可以根据具体的页面需求和布局情况选择最适合的方式。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649805de48841e98945163ec