css 上固定 下自适应

CSS中常常需要实现固定头或底，同时各自与其余内容区域自适应的效果，这里介绍两种实现方式。

实现1：使用position: fixed实现固定头或底

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}
.footer {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
}
.content {
  padding-top: 50px;
  padding-bottom: 50px;
}

实现原理：利用position：fixed将头或底固定在页面上方或下方，然后通过padding-top和padding-bottom属性使content部分自适应大小。

实现2：使用flex布局实现固定头或底

.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.header {
  flex: 0 0 auto;
}
.content {
  flex: 1 0 auto;
}
.footer {
  flex: 0 0 auto;
}

实现原理：通过将容器设置为flex布局，设置flex-direction属性为column来实现竖直方向自适应，然后利用flex属性分别设置头、内容、底的高度。

以上两种方式各有优缺点，可根据实际需求选择合适的方式来实现固定头或底。