JQuery: dynamic height() with window resize()

Question

I\'m having an issue identical to this poster: Jquery problem with height() and resize()

But the solution doesn\'t fix my issue. I have three stacked divs, and I want to

Answer 1

The cleanest solution - also purely CSS - would be using calc and vh.

The middle div's heigh will be calculated thusly:

#middle-div { 
height: calc(100vh - 46px); 
}

That is, 100% of the viewport height minus the 2*23px. This will ensure that the page loads properly and is dynamic(demo here).

Also remember to use box-sizing, so the paddings and borders don't make the divs outfill the viewport.