Css中 stick footer （特定内容固定底部），简单套路实现

做项目中，我们在写弹框的时候，不管弹框的内容多或者少，可能需要一些内容需要固定在框底部，比如关闭按钮。

stick footer就是让footer元素固定在底部

• 1. 当内容不足满屏时，footer紧贴最底部
• 2. 满屏需要下拉时，footer就在内容的底部

以下主要用一种固定的结构实现stick footer ,俗称套路,自古套路得人心呐，费话不多说，看以下结构:

最外层 dialog层, 里面主要 套两个子层，一个内容层，一个就是我们要固定 在底部的内容，注意，这个是与内容是在同一层级的，而不是在内容层里面。

内容层为dialog-wraper层，注意这层是需要清除浮动的，然后里面还有一层 content，这层就是要放置的内容了。

清楚浮动的方法有很多，在这主要用伪类的方式:

dialog层主要是fixed定位:

父亲布局相对比较简单，接下子层的布局需要注意以下几点：

dialog-wraper层

这里我们需要设置最少高度为100%,这样内容层才能占满整屏

接下来是最主要的了

dialog-content层

这里其它的边距可有可无，但一定要有 padding-bottom这个值，这个主要大小，就是你要留给固定在底部的内容的大小

dialog-close层

这层主要注意的是，我们必须要有一个magin-top 且为负值，这个值对应的就dialog-content层的padding-bottom值，还有就是需要清除浮动。

以下是演示效果图:

当内容没有占满的时候

可以看出，当内容不满的时候 ，底部关闭按钮是固定在底部的

当内容很多的时候

从上也可以看出，当内容很多的，底部是可以固定在底部，而且不会遮住内容。

为什么需要清除浮动

有的人会说，我不写浮动也可以实现，我自己在做的时候也是这样的，但有一个问题，就是当我内容不够全屏幕的时候，拖动会有移动的感觉，这样显然用户体验就不太好啦！所以需要加上清除浮动。

愿你成为终身学习者