html - 绝对位置和底部在 IE9 中不起作用

Question

<div class="container" style="position: relative">
    <div id="footer" style="position: absolute; bottom: 25px; margin-top: 10px; left: 0px">
    </div>
</div>

我需要将页脚对齐到页面底部的容器下方。我不需要固定的页脚。所以我在这里使用了绝对位置。这在除 IE9 之外的所有浏览器中都可以正常工作。我也尝试过 position: relative 。 IE9 中没有任何变化。

https://jsfiddle.net/13grvhyt/

我怎样才能做到这一点？

Answer 1

.container{
position: relative;
  width:100%;
  height:200px;
  background-color:red;
  text-align:center;
}

.container h1{
color:white;
}

.footer{
position: absolute; 

  left: 0px
  height:50px;
  width:100%;
  background-color:black;
  text-align:center;
}
.footer h1{
 font-size:22px;
  color:white;
  
}

<div class="container" >
  <h1>I am Container <h1>
    
    </div>
<div class="footer" > <h1> I am Footer</h1>
     </div>