sticky footer布局

来源：互联网发布：人工智能国家战略编辑：程序博客网时间：2024/05/22 17:21

在网页设计中，Sticky footers设计是最古老和最常见的效果之一，大多数人都曾经经历过。
它可以概括如下：如果页面内容不够长的时候，页脚块粘贴在视窗底部；如果内容足够长时，页脚块会被内容向下推送。
这种效果不仅是无处不在，很受欢迎，而且实现起来看上去也非常容易。但实际上实现起来要比预期花的时间更多。
此外，在CSS2.1中的解决方案中几乎都要给页脚设置一个固定高度。这是很脆弱的，很少是可行的。
实际上实现这个效果过于复杂，而且还需要增加特定的标记和一些Hack手段。
https://css-tricks.com/snippets/css/sticky-footer/
html
<div class="detail">

 <div class="detail-wrapper clearfix">   <div class="detail-main">content.......</div> </div> <div class="detail-close">   <i class="icon-close"></i> </div>

</div>

css

.clearfix  display: inline-block  &:after    display: block    content: "."    height:0    line-height:0    clear:both    visibility: hidden
.detail-wrapper  min-height: 100%  .detail-main    margin-top: 64px    padding-bottom: 64px.detail-close  position: relative  width: 32px  height: 32px  margin: -64px auto 0px  clear: both  font-size: 32px

阅读全文

0 0