您的位置：首页 > Web前端 > CSS

CSS布局中的sticky footers布局

2018-03-08 16:15 543 查看

举个栗子：你在做一个类似博客的页面，由于数据有很多条，需要做一个分页固定在底部居中。
这个听上去so esay，似乎只需要display:fixed就可以解决问题了。
可是事实上，当数据较多时，脱离标准流的分页栏会覆盖在一条条的数据上面。
所以，我们的真正的需求应该是，当数据较少时，我们的分页栏固定在页面底部居中
当数据足够多，超过一页时，我们的分页栏应该乖乖在底部居中，而不是无视任何内容，傻傻的固定的定位在那里。

[b]第一种 css
[/b]
效果图（使用任何地方

）

<div class="detail">
<div class="detail-wrapper clearfix"> //clearfix 重要地方
<div class="detail-main">
<p>111</p>
<p>111</p>
<p>111</p>
<p>111</p><p>111</p>
<p>111</p>
<p>111</p>
<p>111</p><p>111</p>
</div>
</div>
<div class="detail-close">x</div>
</div>

.detail
position fixed
width 100%
height 100%
top 0
left 0
z-index 99
overflow auto
background-color rgba(7,17,27,0.8)
color #fff
.detail-wrapper
min-height 100%
.detail-main
margin-top 50px
padding-bottom 65px
.detail-close
position relative
width 32px
height 32px
font-size 32px
margin -65px auto 0 auto
clear both  //重要地方

第二种 flex
效果图（像上面的弹框用flex会有些问题，其他页面可以用flex布局）

<body>
<div class="wrap">

<div class="content">
<h2>Sticky-footer-flexbox布局方法</h2>
<p>经典套路相比，首先是 HTML 部分，内容区域 content 不再需要 wrap 容器然后 CSS 部分减肥成功，仅仅使用四行代码，就解决了曾经困扰了一代人的难题而且使用 Flexbox，就不需要限定 footer 的高度，让页面布局更加灵活当然缺点也是显而易见的，只有 IE10 及以上的浏览器才支持 flex 布局</p>
</div>

<div class="footer">
<p>这是页脚</p>
</div>
</div>
</body>

body,html{
height: 100%;
}
.wrap {
display: flex;
flex-direction: column;
height: 100%;
}
.content {
flex: 1;
background: #eee;
}
.footer {
background: red;
}

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航