CSS粘住固定底部的5种方法

小咪咪 2021-09-18 14:40 260阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70][]

本文主要介绍一个Footer元素如何粘住底部，使其无论内容多或者少，Footer元素始终紧靠在浏览器的底部。我们知道，当内容足够多可以撑开底部到达浏览器的底部，如果内容不够多，不足以撑开元素到达浏览器的底部时，下面要讲的布局就是解决如何使元素粘住浏览器底部。需求看下图：![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 1][]

### **全局增加一个负值下边距等于底部高度** ###

有一个全局的元素包含除了底部之外的所有内容。它有一个负值下边距等于底部的高度。

HTML

CSS

演示

![20190325142219211.png][]

这个代码需要一个额外的元素.push等于底部的高度，来防止内容覆盖到底部的元素。这个push元素是智能的，它并没有占用到底部的利用，而是通过全局加了一个负边距来填充。

### **底部元素增加负值上边** ###

虽然这个代码减少了一个.push的元素，但还是需要增加多一层的元素包裹内容，并给他一个内边距使其等于底部的高度，防止内容覆盖到底部的内容。

HTML

CSS

演示

![20190325142319177.png][]

### **使用calc()计算内容的高度** ###

HTML

CSS

演示

![20190325142413605.png][]

给70px而不是50px是为了为了跟底部隔开20px，防止紧靠在一起。

### **使用flexbox** ###

HTML

CSS

演示

![20190325142528353.png][]

### **使用grid布局** ###

HTML

CSS

演示

![20190325142705950.png][]

grid早于flexbox出现，但并没有flexbox被广泛支持，你可能在chrome  Canary或者Firefox开发版上才可以看见效果。

如果您在Java学习的过程中遇到难题，欢迎关注微信公众号【筑梦前端】，大家一起交流解决！

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70]: /images/20210812/6f3a7c80f73148508e26cf95dbda5c1a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NDgxMTQxNw_size_16_color_FFFFFF_t_70 1]: /images/20210812/082e0b395f1d45249f5df7432a83fec6.png
[20190325142219211.png]: /images/20210812/beddd760794e47f3bb0eed2ed1f4610b.png
[20190325142319177.png]: /images/20210812/0515057a563843c599cce9afeae45724.png
[20190325142413605.png]: /images/20210812/cf42a0cdb9094152acd087b49eea75c4.png
[20190325142528353.png]: /images/20210812/74dd6bf9091e47dd8b993f313c9f19fa.png
[20190325142705950.png]: /images/20210812/4988e28e65c24926a4494576d5aa889d.png