关于头部、底部固定，中间内容可滚动的css设计

今天在做活动的时候，有这样的一个需求：头部的tab切换固定不动，底部还有一个浮层框也是固定不动的。

本来，我知道固定不动，那就是用position:fixed;来实现，但是，我中间的内容是一张图片，而且超过了手机屏幕大小，怎么滚也滚不到底部。

知道，我发现，设置一下图片的上下距离，就可以了。

```

这是固定不动的头部

   

这是底部要固定的浮层

```

思路：

1、首先，header跟footer肯定都是要固定的，而且都是在页面的最上层，也就是离用户最近的地方。

    表现为CSS就是：

```

    position:fixed;

    z-index:999;

```

2、设置main主题部分上下的距离,我用的是padding

```

    padding-top:20px; //对应header的高度

    padding-bottom:151px; //对应footer的高度

```

这样就可以了。