Why my heights fixer code work wrong when browser window restored after being maximised?

Question

Answer 1

You don't need javascript or tables to achieve the layout you want.

box-sizing: border-box; can replace that javascript and is compatible with IE8+, FF, and Chrome. This is a good article on box-sizing.

New Example

Take this snippet and paste it into a new HTML document. This works in IE8, though we need to accommodate for it with height 99.8% on html,body using

Header

I'm Vertically Centered!

I'm Vertically Centered!

Footer

---

Original Example

Here is a simple example featuring display: table; / display:table-cell;. It can be tweaked to give you the exact layout that you are looking for.

Have a jsBin example!

HTML

    

        Header
    
      

    


        

            I'm Vertically Centered!
        

        

            I'm Vertically Centered!
        

    

    

        Footer
    
      

CSS

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}    
html,body {
    height: 100%;
}
.wrap {
    height: 100%;
}
.header {
    height: 5%;
    border: solid 1px #000;
    border-bottom: none;
}
.table {
    display: table;
    height: 90%;
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}
.cell {
    display: table-cell;
    border: solid 1px #000;
    vertical-align: middle;
}
.footer {
    height: 5%;
    border: solid 1px #000;
    border-top: none;
}