css页面顶部底部固定，中间自适应几种方法

在 CSS 中实现页面顶部和底部固定，中间自适应有多种常见方法：

方法一：使用绝对定位

1. 将顶部元素设置为绝对定位，并固定在顶部。
2. 将底部元素同样设置为绝对定位，并固定在底部。
3. 中间内容部分设置 margin-top 和 margin-bottom 来留出顶部和底部的空间。

body {
   
  position: relative;
}

.top {
   
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
}

.bottom {
   
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.middle {
   
  margin-top: /*顶部元素高度*/;
  margin-bottom: /*底部元素高度*/;
}

方法二：使用 Flex 布局

1. 将页面整体设置为 Flex 布局，flex-direction 为列。
2. 顶部和底部元素设置固定高度，中间内容自动填充剩余空间。

body {
   
  display: flex;
  flex-direction: column;
}

.top {
   
  height: /*顶部高度*/;
}

.bottom {
   
  height: /*底部高度*/;
}

.middle {
   
  flex: 1;
}

方法三：使用 Grid 布局

1. 将页面设置为 Grid 布局，划分出顶部、底部和中间区域。
2. 顶部和底部固定，中间自适应。

body {
   
  display: grid;
  grid-template-rows: /*顶部高度*/ auto /*底部高度*/;
}

.top {
   
  grid-row: 1;
}

.bottom {
   
  grid-row: 3;
}

方法四：结合其他方法

还可以结合使用 calc() 函数、媒体查询等方式来进一步优化和适应不同屏幕尺寸。