什么是粘连布局（css sticky footer）

当main的高度足够长的时候，紧跟在后面的元素

粘连布局的布局方法

粘连布局由三个组成部分：wrap容器,main内容,footer脚部

具体实现思路：

1、当内容区小于 main 时，保证 main 的最低高度为视窗高度，此处请注意如果要保证等于视窗高度需要从html,body一层层继承高度100%。同时为了保证底部时刻保持在最底部，需要给 footer 设置 margin-top = 底部的高度。

2、当内容区大于 main 时，为了避免 main 与 footer 重合，可以给包含的 main 设置 padding-bottom 为底部的高度。具体样式代码如下：

*{                margin: 0;                padding: 0;                     }            html,body{                height: 100%;            }            #main{            min-height: 100%;              }            .main{                padding-bottom: 100px;            }            #footer{                height: 100px;                background: pink;                margin-top: -100px;            }

完整代码示例

转载地址：http://tavii.baihongyu.com/

你可能感兴趣的文章