Footer is displaying in middle of screen instead of bottom in Internet Explorer 11

Question

In IE11, footer is displayed at middle of screen rather than on bottom. I am using below CSS which was working file until we upgraded the browser to IE11.

#footer {
    clear: both; 
    height:45px; 
    position: absolute; 
    bottom: 0; 
    left: 0; 
    border: none; 
    width: 100%;
}

Note:- My page has a Tab views & we are using Layout template in MVC. Please suggest some solution.

Answer 1

There is nothing wrong with your CSS. Based on experience, the only issue I can foresee, is that your footer has a parent element with the property position: relative;

This causes the "absolute" positioning to be relative to the parent and not the window itself.

Also, you probably don't clear:both; . If you have floating elements inside footer, just add overflow: auto; and that will clear your floats!

Answer 2

It may now be less relevant as IE seems to be less and less popular, but the only thing IE properly recognizes as far as vertical positioning is concerned is div. So what seems to have helped in my case is brute-forcing all elements, including the footer, into its own div:

<div style={{position: "sticky", top: "0px", zIndex: "10"}} >
    <Nav />
</div>
<div>
    <C {...props} {...cProps} />
</div>
<div style={{marginTop: "20px"}}>
    <Footer />
</div>