stick footer布局

将footer固定到底部。文章内容不足满屏时 footer在底部,超过满屏时footer在内容末尾。

<div class="wrap">
  <div class="content">
    <div class="content-main"></div>
  </div>
  <div class="foot"></div>
</div>
.wrap{
position:fixed;
left:0;
top:0;
width:100%;
height:100%;
overflow:auto;
}
.wrap .content{
min-height:100%;
}
.wrap .footer{
position:relative;
width:30px;
height:30px;
margin:-30px auto 0 auto;//注意magin-top为负值
clear:both;
text-aligin:center;
}
.wrap .content .content-main{
margin-top:50px;//magin-top不是必须的
padding-bottom:30px;//padding-bottom与上边magin-top数值相同
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值