Положение абсолютное и нижнее не работает в 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>