使用flex：1扩展div将崩溃IE11中的所有内容(Using flex: 1 to expand the div will collapse everything in IE11)

编程入门行业动态更新时间:2024-10-20 11:50:49

我用这个指南让我的页脚粘在底部： http ： //philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/

本指南使用弹性框来完成工作。它在Chrome和Firefox上运行得非常完美，甚至在Edge上运行。但是在IE11上，所有元素都在这个图像中相互折叠：

代码演示：

body {
  min-height: 100%;
  position: relative;
}
.container {
  display: flex;
  min-height: 100vh;
  height: 100%;
  flex-direction: column;
}
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
} 
  <body class="Site">
  <div id="react-root">
    <div class="container">
      <main class="Site-content">Site</main>
      <footer>Footer</footer>
    </div>
  </div>
</body> 
  
 
 
 知道如何解决这个问题吗？ 提前致谢 ：-） 
I used this guide to make my footer stick to the bottom : http://philipwalton.github.io/solved-by-flexbox/demos/sticky-footer/ 
This guide use flex box to do the job. It worked perfectly on Chrome and Firefox and even on Edge. But on IE11, all the elements collapse on each other like in this image : 
 
Code demo : 
 
 
  
  body {
  min-height: 100%;
  position: relative;
}
.container {
  display: flex;
  min-height: 100vh;
  height: 100%;
  flex-direction: column;
}
.Site {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
} 
  <body class="Site">
  <div id="react-root">
    <div class="container">
      <main class="Site-content">Site</main>
      <footer>Footer</footer>
    </div>
  </div>
</body> 
  
 
 
Any idea how to fix this? Thanks in advance :-)
                最满意答案
                
                    
                         只需使用以下内容使其适用于IE11：  
html, body{
    height:100%;
}
 
 完整代码：  
 
 
  
  html, body{
    height:100%;
}

.Site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
} 
  <body class="Site">
  <main class="Site-content">Site</main>
  <footer>Footer</footer>
</body> 
  
 
 
 工作小提琴链接 
Just use following to make it working for IE11: 
html, body{
    height:100%;
}
 
Full Code: 
 
 
  
  html, body{
    height:100%;
}

.Site {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: green;
}
.Site-content {
  flex: 1;
  background-color: red;
}
footer {
  background-color: blue;
  height: 50px;
} 
  <body class="Site">
  <main class="Site-content">Site</main>
  <footer>Footer</footer>
</body> 
  
 
 
Working Fiddle link