CSS Grid+Flex子元素重叠及Main区域底部固定Footer的IE11兼容问题

这问题我之前帮人踩过类似的坑，结合IE11的兼容特性，给你一套能直接落地的解决方案：

咱们的目标是实现：顶部Header固定64px，下方左/主/右三列填满剩余视口高度，且主内容区（Main）的专属Footer始终固定在该区域底部。之前出现的重叠问题，核心是Grid单元格的高度传递+Flex布局的空间分配没做好，再加上IE11对Grid/Flex的支持有特殊要求。

HTML结构 #

<div class="grid-container">
  <header class="header">Header</header>
  <aside class="left-sidebar">Left Sidebar</aside>
  <main class="main-content">
    <div class="main-body">
      <!-- 这里放Main的动态内容 -->
      主内容区域示例<br>
      即使内容只有一行<br>
      Footer也会固定在Main底部<br>
      👇👇👇
    </div>
    <footer class="main-footer">Main专属Footer</footer>
  </main>
  <aside class="right-sidebar">Right Sidebar</aside>
</div>

CSS（含IE11兼容） #

/* 重置默认样式，避免浏览器默认值干扰 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* 确保根节点和body占满整个视口高度 */
html, body {
  height: 100%;
  overflow: hidden; /* 按需开启，避免整体页面滚动 */
}

/* 外层Grid容器 */
.grid-container {
  display: -ms-grid; /* IE11 Grid前缀 */
  display: grid;
  width: 100%;
  height: 100%;
  /* 行配置：Header占64px，剩余高度给内容行 */
  -ms-grid-rows: 64px calc(100% - 64px);
  grid-template-rows: 64px calc(100% - 64px);
  /* 列配置：左/右栏200px，主栏占剩余空间（可按需调整宽度） */
  -ms-grid-columns: 200px 1fr 200px;
  grid-template-columns: 200px 1fr 200px;
}

/* Header区域：跨所有列 */
.header {
  -ms-grid-row: 1;
  -ms-grid-column: 1;
  -ms-grid-column-span: 3; /* IE11需手动指定跨列数 */
  grid-column: 1 / -1; /* 现代浏览器简化写法 */
  background: #f0f0f0;
  padding: 16px;
}

/* 左侧边栏 */
.left-sidebar {
  -ms-grid-row: 2;
  -ms-grid-column: 1;
  background: #e0e0e0;
  padding: 16px;
}

/* 核心：Main内容区 */
.main-content {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  /* 开启Flex布局，让内部Footer固定底部 */
  display: -ms-flexbox; /* IE11 Flex前缀 */
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  /* 关键：确保Main占满Grid单元格的高度（IE11必须显式设置） */
  height: 100%;
  background: #ffffff;
  padding: 16px;
}

/* Main内容主体：自动填充剩余空间 */
.main-body {
  -ms-flex: 1; /* IE11 Flex占比前缀 */
  flex: 1;
  /* 内容过多时自动出现滚动条 */
  overflow-y: auto;
  margin-bottom: 16px; /* 和Footer保持间距 */
}

/* Main专属Footer */
.main-footer {
  background: #f5f5f5;
  padding: 12px;
  border-top: 1px solid #eee;
}

/* 右侧边栏 */
.right-sidebar {
  -ms-grid-row: 2;
  -ms-grid-column: 3;
  background: #e0e0e0;
  padding: 16px;
}

1. Grid高度传递：外层Grid容器必须设置height: 100%，继承自html/body的视口高度，这样calc(100% - 64px)才能正确计算剩余空间。
2. Flex空间分配：Main区域设置为Flex容器后，.main-body的flex: 1会让它自动填充剩余高度，Footer被挤压到底部，彻底解决重叠问题。
3. IE11特殊处理：
   • Grid/Flex属性必须加-ms-前缀
   • Grid项必须手动指定-ms-grid-row/-ms-grid-column位置，IE11不支持现代Grid的自动布局
   • calc()函数的运算符前后必须加空格（IE11对空格要求严格）
   • Main区域必须显式设置height: 100%，否则IE11不会继承Grid单元格的高度

内容的提问来源于stack exchange，提问作者Carlos Valencia