Sticky footers布局
来源:互联网 发布:股票套牢知乎 编辑:程序博客网 时间:2024/05/22 06:29
上代码以便理解:
<div class="box">
<div class="box1 clearfix">
<div class="content"></div>
</div>
<div class="box2"></div>
</div>
.clearfix:after {
display: block;
content: ".";
height: 0;
line-height: 0
clear: both;
visibility: hidden;
}
.clearfix { display: inline-block; }
}
.box{
background-color:rgba(7,17,27,0.8);
}
.box1{
min-height:100%;//最小高度:视口高度
}
.box1 .content{
margin-top:64px;
padding-bottom:64px;
}
.box2{
position:relative;
width:32px;//根据自己需求而定
height:32px;
margin:-64px auto 0 auto;//-64px是为了使这个块提上来,在未满屏的时候不至于产生滚动效果
clear:both;
font-size:32px;
}
其实就是满足三点:
1、在满屏状态:使下面的块不至于超出整个块的空间产生滚动效果,所以设置了:margin-top:-64px(margin:-64px auto 0 auto;);
2、在超出屏幕的状态产生滚动条后,为了使下面的块的内容不覆盖上面块的内容,设置了:padding-bottom:64px;
3、之所以需要box1这个盒子,是因为为了规定满屏状态时,使下面的块处于底部的位置。
- Sticky footers布局
- CSS Sticky footers 布局设计
- Sticky footers布局的实现
- 【业务】CSS布局中的sticky footers布局
- Sticky footers 粘性页脚布局
- Sticky footers解决方案总结
- CSS秘密花园: Sticky footers
- footer随能容高度,固定到底部Sticky footers
- css 中 Sticky footers (让页脚紧贴页面底部的方法)
- sticky footer 布局
- sticky-footer布局
- CSS Sticky Footer 布局
- CSS Sticky Footer布局
- sticky footer布局
- css sticky footer布局
- Sticky footer布局
- sticky footer 布局
- sticky footer布局
- C# 中的委托和事件(1)
- Ubuntu下使用c++ json库
- NOI2015 航空管制
- 第一篇博客——关于C++中引用的笔记
- C#中的委托和事件(2)
- Sticky footers布局
- Android疑难 —隐式Intent匹配原则、Android Studio Clean and Rerun、LayoutInflater、Context
- 背包模板
- Vim + instant markdown makes Cool
- 查看和修改MySQL数据库的事物隔离级别
- Win10下用IDEA搭建Struts2+Spring4+Hibernate5(SSH)框架,实现用户登录注册
- Yii2.0美化路由Url
- 关于一些很平常的错误原因(个人的一些问题和怎么处理的)
- xtrabackup 工具备份mysql 5.7以及常见报错解决办法