sticky footer布局

最新推荐文章于 2023-03-29 19:59:11 发布

转载最新推荐文章于 2023-03-29 19:59:11 发布 · 366 阅读

CSS 专栏收录该内容

7 篇文章

订阅专栏

本文介绍了网页设计中常见的Sticky Footer效果实现方法。当页面内容不足时，页脚会固定在浏览器窗口底部；而当内容较多时，页脚则会随内容下移。文章探讨了实现这一效果面临的挑战，并提供了一种利用CSS布局技巧来实现该效果的方案。

在网页设计中，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