CSS 实现头部、页脚滚动和固定

目录

• sticky
• 实现

在一般的网站中都会有头部和页脚。

头部会一直固定在最上面位置。

页脚呢，当页面内容超出一屏时，页脚在内容最后，当不足一屏时，在页面最下面。

实现方式有很多。这里使用的是 position:sticky;

sticky

sticky 粘性定位。是css新增的一个position属性。

为什么说是粘性定位，从适用场景来看：一开始显示，滚动到一定位置需要显示的元素。

在没有达到设置的粘着位置时，和正常元素一样，达到粘着距离，就好一直保持这个位置。

使用注意事项：

　　1、父元素不能有 overflow 属性

　　2、left、top、right、bottom 必须要有一个

　　3、仅在父元素内生效，父元素的高度必须大于 sticky 元素高度

　　4、兼容加 -webkit 前缀

下面是最简单的 header 使用：

.header{
  position:sticky;
  top:0;    
}

实现

下面是实现，头部和页脚的滚动和固定。

HTML 部分：

  <div class="layout">
    <div class="header">
    </div>

    <div class="footer">
    </div>
  </div>

CSS 部分：

.layout {
  width: 100%;
  min-height: 100%;    // 这是为了 footer 在内容不足时能在最下面
  // height: 100%;  // 设置遮盖属性，sticky 超过这个高度就会消失

  .header {
    position: sticky;
    top: 0;
    display: flex;
    width: 100%;
    height: 80px;
  }

  .footer {
    position: sticky;
    top: calc(100% - 80px);
    height: 80px;
  }
}