CSS布局中的sticky footers布局

举个栗子：你在做一个类似博客的页面，由于数据有很多条，需要做一个分页固定在底部居中。

这个听上去so esay，似乎只需要display:fixed就可以解决问题了。

可是事实上，当数据较多时，脱离标准流的分页栏会覆盖在一条条的数据上面。

所以，我们的真正的需求应该是，当数据较少时，我们的分页栏固定在页面底部居中

当数据足够多，超过一页时，我们的分页栏应该乖乖在底部居中，而不是无视任何内容，傻傻的固定的定位在那里。

第一种 css

效果图（使用任何地方）

<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;
		}

CSS布局中的sticky footers布局

猜你喜欢