IE11环境下带粘性页脚的Div垂直居中问题求助

我来帮你搞定IE11里这个带粘性页脚的垂直居中问题！你的核心麻烦出在position: absolute的布局上——它让内容容器脱离了文档流，不仅导致页脚被挤变形，还没法在内容变长时自动撑开空间。

下面给你一套兼容IE11的解决方案，用Flexbox就能完美实现需求：

问题根源拆解 #

你用position: absolute给.outer-container设了100%高度，这会让它“飘”在页面上，完全不考虑页脚的存在。当内容变多超过视口时，绝对定位的容器不会自动扩展，要么内容溢出看不到，要么直接把页脚挤扁。

修复方案（兼容IE11） #

我们用Flexbox重构布局，既能实现内容垂直居中，又能保证粘性页脚的正常表现，IE11对这套属性的支持很稳定，只需加少量前缀：

1. 调整HTML结构（更清晰的层级）

简化多余嵌套，让布局逻辑更直观：

<body>
  <div class="wrapper">
    <div class="art-header"></div>
    <div class="contner">
      <button type="button" class="btn btn-primary text-center" (click)="addLine()">Primary</button>
      <ul>
        <li *ngFor="let line of name" > {{ line }} </li>
      </ul>
    </div>
  </div>
  <div class="footer">
    <div class="rmpm-footer">
      <p>Footer</p>
    </div>
  </div>
</body>

2. 核心CSS调整

/* 重置默认样式，消除浏览器差异 */
html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}

/* 把body设为垂直方向的Flex容器，是实现粘性页脚的核心 */
body {
  display: -ms-flexbox; /* IE11专用前缀 */
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
}

/* 内容区占据除页脚外的所有空间，同时内部实现垂直居中 */
.wrapper {
  -ms-flex: 1 0 auto; /* IE11需要明确flex的三个值：grow/shrink/basis */
  flex: 1 0 auto;
  width: 100%;
  /* 内部内容垂直+水平居中 */
  display: -ms-flexbox;
  display: flex;
  -ms-flex-align: center;
  align-items: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/* 页脚固定在底部，禁止被压缩 */
.footer {
  -ms-flex-shrink: 0; /* IE11：不让页脚缩小 */
  flex-shrink: 0;
  width: 100%;
  /* 可自定义背景色，方便区分 */
  background-color: #f8f9fa;
}

/* 保留你原有的容器样式，移除冗余属性 */
.contner {
  min-height: 242px;
  max-height: 100%;
  width: 604px;
  padding: 10px 0 12px;
  background-color: #FFFFFF;
  box-shadow: 0 1px 1px 1px rgba(0,0,0,0.1);
  transition: max-height .4s;
  -webkit-transition: .4s;
  margin-top: 40px; /* 保留你需要的顶部间距 */
}

方案优势说明

• 粘性页脚：通过body的Flex布局，.wrapper的flex:1会自动占据页面剩余空间，页脚flex-shrink:0保证它不会被压缩，始终固定在页面底部。
• 动态居中：.wrapper内部用align-items: center和justify-content: center实现内容居中，当内容高度超过视口时，.wrapper会自动撑开，页面出现滚动条，页脚也会被推到内容下方，完全符合你的需求。
• IE11兼容：所有Flex属性都添加了-ms-前缀，IE11能完美识别，不会出现布局错乱。

效果验证 #

• 内容较少时，.contner稳稳垂直居中在视口内，页脚固定在底部。
• 点击按钮添加列表项，内容变长超过视口后，页面滚动正常，页脚随内容下移，不会被挤压变形。

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