compass 中的 页脚固定 sticky-footer

本文介绍了一种使用Compass框架实现的CSS粘性页脚布局方法,通过设置页脚高度及选择器来确保页脚始终处于屏幕底部,即使内容长度发生变化也能保持位置不变。
<body>
    <div id="root">
       <div id="root_footer"></div>
   </div>
   <div id="footer">
      Footer content goes here.
   </div>
8 </body>
//index.css
@include sticky-footer(54px) //参数为footer高度
@include sticky-footer(54px, "#my-root", "#my-root-footer", "#my-footer") // 自定义选择器

官方在线demo http://compass-style.org/examples/compass/layout/sticky-footer/

具体的语法:
sticky-footer($footer-height, $root-selector, $root-footer-selector, $footer-selector)

$footer-height:页脚高度

$root-selector:页面主题的id

$root-footer-selector:形式上的页脚id

$footer-selector:真是页脚

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值