实现stick footer布局
- 什么是stick footer
- 实现方式
- 总结
stick footer布局简介
stitck footer布局现在在手机端比较常见,通常是固定一个关闭按钮在一个界面的页脚,当页面内容不撑满页面的时候,关闭按钮还是会在页脚。当页面内容超过页面。这个时候,关闭按钮也会随之向下移动。
实现方式
设计
container表示容器,content表示内容区,在内容区内根据自己的需要可以又分很多div,close就是定义在页脚div通常可能是关闭按钮或者图标
<div class="container">
<div class="content">
<div class="content-main"></div>
</div>
<div class="close">关闭</div>
</div>
container与content的css书写
html,
body {
height: 100%;
margin: 0;
padding: 0;
}
.container {
height: 100%;
}
.content {
min-height: 100%;
border:1px solid red;
}
.content-main{
padding-bottom: 32px;
margin-top:32px ;
border: 1px solid black;
}
.close{
height: 32px;
}
如果content-main没有内容的时候回出现下图的效果:
通过以上的样式书写,可以发现,内容区域的高度始终是100%高度,而关不按钮失踪是在内容以上,所以下面我们就需要把页脚搬上来
close样式书写
.close{
height: 32px;
position: relative;
margin: -32px auto;//这里会在内容不足的时候,把页脚从页面外拉出来
background: rgb(7,17,27);
clear: both;
}
部分效果展示如下:
总结
在写文章之前并没有想过要写总结,但是在写文章的过程中我好想想通了一点点什么,为什么内容会设置会设置一个padding-bottom为32px了,好想并没有体现出什么。但是如果你的内容的边框刚好充满整个页面的时候,我们的页脚就刚好占据下内边距的位置,让我们的整个页面刚好充满,这就是设置这个值得原因!