css制作固定模板

使用CSS创建固定模板的方法

固定模板通常指页面布局中某些元素（如导航栏、页脚）位置固定，不随滚动条移动。以下是几种实现方式：

固定定位（Fixed Positioning） 通过position: fixed属性将元素固定在视口的特定位置：

.header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px;
  background: #333;
  z-index: 1000;
}

粘性定位（Sticky Positioning） 结合相对定位和固定定位的特性，元素在到达特定位置时变为固定：

.sidebar {
  position: sticky;
  top: 20px;
  height: 100vh;
}

网格布局（Grid Layout） 使用CSS Grid划分固定区域和可滚动区域：

.container {
  display: grid;
  grid-template-areas:
    "header header"
    "sidebar content";
  grid-template-rows: 80px 1fr;
  grid-template-columns: 200px 1fr;
  height: 100vh;
}
.header { grid-area: header; position: fixed; }

弹性盒子（Flexbox） 通过Flexbox实现固定高度和自适应区域：

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.main-content {
  flex: 1;
  margin-top: 80px; /* 补偿固定头部高度 */
}

视口单位（Viewport Units） 利用vh/vw单位控制固定元素尺寸：

.footer {
  position: fixed;
  bottom: 0;
  width: 100vw;
  height: 10vh;
}

实际应用注意事项

• 固定元素会脱离文档流，需为内容区域添加margin/padding避免遮挡
• 移动端需考虑viewport元标签和iOS的视口高度差异
• 高优先级使用will-change: transform优化固定元素的渲染性能
• 多层级固定元素时注意z-index的堆叠顺序

示例完整模板结构：

<div class="header">固定头部</div>
<div class="sidebar">固定侧栏</div>
<main class="content">可滚动内容</main>
<div class="footer">固定页脚</div>