做项目中,我们在写弹框的时候,不管弹框的内容多或者少,可能需要一些内容需要固定在框底部,比如关闭按钮。stick footer 就是让 footer 元素固定在底部
- 当内容不足满屏时,footer 紧贴最底部
- 满屏需要下拉时,footer 就在内容的底部
以下主要用一种固定的结构实现 stick footer , 俗称套路, 看以下html结构:
css样式:
#wrap { height: auto; min-height: 100%; } #main { /* 必须使用和footer相同的高度 */ padding-bottom: 150px; } #footer { position: relative; /* footer高度的负值 */ margin-top: -150px; height: 150px; clear:both; } .clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; } .clearfix { display: inline-block; }