如何实现兼容IE11的CSS布局：剩余空间按2/3与1/3分配

这个问题确实挺棘手的——既要兼容IE11，又要处理动态高度的上层内容，还要按比例分配剩余空间。我这里有两个经过验证的方案，都能完美解决你的需求，咱们一个个来看：

方案一：Flexbox嵌套方案（推荐，更灵活） #

核心思路是用两层垂直Flex容器嵌套：外层容器负责分离“动态高度层”和“剩余空间层”，内层容器再把剩余空间按66%/34%的比例分配给下面两个子层。IE11对Flexbox的支持虽然有细节坑，但这个方案经过测试可以正常工作。

HTML结构 #

<div class="container">
  <!-- 第一层：高度可变内容 -->
  <div class="dynamic-top">
    <p>这里是高度可变的内容，比如动态加载的文本、图片等</p>
    <p>多添加几行内容试试，高度会自动撑开</p>
  </div>
  <!-- 剩余空间容器 -->
  <div class="remaining-space">
    <!-- 第二层：占剩余空间66% -->
    <div class="layer-66">剩余空间的66%</div>
    <!-- 第三层：占剩余空间剩余部分（34%） -->
    <div class="layer-34">剩余空间的34%</div>
  </div>
</div>

CSS代码（兼容IE11） #

/* 确保根元素和body占满视口高度，消除默认边距 */
html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 外层Flex容器：垂直方向，占满高度 */
.container {
  display: -ms-flexbox; /* IE11前缀 */
  display: flex;
  -ms-flex-direction: column; /* IE11前缀 */
  flex-direction: column;
  height: 100%;
}

/* 动态高度层：自动适应内容高度 */
.dynamic-top {
  padding: 1rem;
  background: #f0f0f0;
}

/* 剩余空间容器：占满外层容器的剩余高度 */
.remaining-space {
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  /* IE11需要明确设置flex属性，确保占满剩余空间 */
  -ms-flex: 1 0 auto;
  flex: 1 0 auto;
  height: 0; /* 修复IE11中Flex子项高度计算异常的问题 */
}

/* 66%比例层 */
.layer-66 {
  /* IE11中用-ms-flex-preferred-size设置基准高度 */
  -ms-flex-preferred-size: 66%;
  flex-basis: 66%;
  /* 禁止收缩，确保比例稳定 */
  -ms-flex-negative: 0;
  flex-shrink: 0;
  padding: 1rem;
  background: #cce5ff;
}

/* 34%比例层：占剩余空间 */
.layer-34 {
  -ms-flex: 1;
  flex: 1;
  padding: 1rem;
  background: #d4edda;
}

IE11兼容要点 #

• 必须添加-ms-前缀的Flex属性
• 给remaining-space设置height:0可以修复IE11中Flex子项无法正确拉伸的bug
• 用flex-basis（或-ms-flex-preferred-size）明确设置比例层的基准高度，同时禁用flex-shrink避免空间被压缩

方案二：Table布局方案（兼容性拉满） #

如果你的项目需要极致的兼容性，Table布局是更稳妥的选择——IE11对Table的高度计算逻辑支持得非常完善，完全不用担心动态高度带来的计算问题。

HTML结构 #

<div class="table-container">
  <!-- 第一层：动态高度行 -->
  <div class="table-row dynamic-top">
    <div class="table-cell">
      <p>这里是高度可变的内容</p>
      <p>Table布局会自动适应内容高度</p>
    </div>
  </div>
  <!-- 剩余空间行 -->
  <div class="table-row remaining-row">
    <div class="table-cell">
      <div class="inner-table">
        <!-- 第二层：66%比例行 -->
        <div class="table-row layer-66">
          <div class="table-cell">剩余空间的66%</div>
        </div>
        <!-- 第三层：34%比例行 -->
        <div class="table-row layer-34">
          <div class="table-cell">剩余空间的34%</div>
        </div>
      </div>
    </div>
  </div>
</div>

CSS代码 #

html, body {
  height: 100%;
  margin: 0;
  padding: 0;
}

/* 外层Table容器：占满视口高度 */
.table-container {
  display: table;
  width: 100%;
  height: 100%;
}

/* Table行样式 */
.table-row {
  display: table-row;
}

/* Table单元格样式 */
.table-cell {
  display: table-cell;
  vertical-align: top;
}

/* 动态高度行：自动适应内容 */
.dynamic-top .table-cell {
  padding: 1rem;
  background: #f0f0f0;
}

/* 剩余空间行：占满外层容器的剩余高度 */
.remaining-row {
  height: 100%;
}

/* 内层Table：用于分配剩余空间比例 */
.inner-table {
  display: table;
  width: 100%;
  height: 100%;
}

/* 66%比例行 */
.layer-66 {
  height: 66%;
}

.layer-66 .table-cell {
  padding: 1rem;
  background: #cce5ff;
}

/* 34%比例行 */
.layer-34 .table-cell {
  padding: 1rem;
  background: #d4edda;
}

方案优势 #

• 完全兼容IE11及更老的浏览器
• 高度计算逻辑简单直接，不会出现Flexbox的兼容性bug
• 动态内容层的高度变化会自动挤压剩余空间，比例始终保持准确

两种方案都能满足你的需求，如果你需要后续扩展更多布局特性，推荐用Flexbox方案；如果是老项目追求极致稳定，Table布局会更靠谱。

内容的提问来源于stack exchange，提问作者John Smith