北京百思可瑞教育：css页面顶部底部固定，中间自适应几种方法

原创

用户1162104

发布于 2025-09-03 09:47:01

1030

以下是实现页面顶部和底部固定、中间内容自适应的几种常见方法，附代码示例和适用场景分析：

方法一：Flexbox 弹性布局

<body style="margin:0; min-height:100vh; display:flex; flex-direction:column;">
  <header style="height:60px; background:#ccc;">顶部固定</header>
  <main style="flex:1; overflow-y:auto;">中间自适应内容</main>
  <footer style="height:40px; background:#eee;">底部固定</footer>
</body>

特点：

现代浏览器首选方案
中间区域自动填充剩余空间
支持中间内容独立滚动

方法二：CSS Grid 网格布局

<body style="margin:0; height:100vh; display:grid; grid-template-rows:60px 1fr 40px;">
  <header style="background:#ccc;">顶部固定</header>
  <main style="overflow-y:auto;">中间自适应内容</main>
  <footer style="background:#eee;">底部固定</footer>
</body>

特点：

二维布局能力更强
代码简洁直观
适合复杂布局场景

方法三：绝对定位

<body style="margin:0;">
  <header style="position:fixed; top:0; width:100%; height:60px; background:#ccc;">顶部固定</header>
  <main style="margin:60px 0 40px; height:calc(100vh - 100px); overflow-y:auto;">
    中间自适应内容
  </main>
  <footer style="position:fixed; bottom:0; width:100%; height:40px; background:#eee;">底部固定</footer>
</body>

特点：

兼容性最好（支持IE8+）
需要手动计算高度
注意设置中间区域的外边距

方法四：Viewport单位 + Calc

<style>
  header { height:10vh; background:#ccc; }
  footer { height:8vh; background:#eee; }
  main { 
    height: calc(100vh - 18vh); 
    overflow-y: auto;
  }
</style>

<header>顶部固定</header>
<main>中间自适应内容</main>
<footer>底部固定</footer>

特点：