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 use JQuery to make the middle one adjust in height to 100  of the window height  minus the height  23px   2  of the other top  amp  bottom divs  It works on resize  but it s off  short  by 16px when the document initially loads   HTML   lt body gt   lt div id  bg1  class  bg  gt top lt  div gt   lt div id  content  gt      help me  seriously   lt  div gt   lt div id  bg2  class  bg  gt bottom lt  div gt   lt  body gt    CSS  html  body       width 100       height 100       bg   width 315px  height 23px  margin 0 auto  text-indent -9000px      bg1  background url    images bg1 png  0 50  no-repeat    bg2  background url    images bg2 png  0 50  no-repeat     content   width 450px   margin 0 auto  text-align  center      JQuery    document  ready function        resizeContent           window  resize function             resizeContent                 function resizeContent          height     window  height   - 46         body div content   height  height

User · Accepted Answer

I feel like there should be a no javascript solution, but how is this?

http://jsfiddle.net/NfmX3/2/

$(window).resize(function() {
    $('#content').height($(window).height() - 46);
});

$(window).trigger('resize');

User · Answer

To see the window height while  or after  it is resized  try it     window  resize function        body   prepend   lt div gt       window  height   - 46     lt  div gt

User · Answer

Okay  how about a CSS answer  We use display  table  Then each of the divs are rows  and finally we apply height of 100  to middle  row  and voil     http   jsfiddle net NfmX3 3   body   display  table    div   display  table-row     content       width 450px       margin 0 auto      text-align  center      background-color  blue      color  white      height  100

User · Answer

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

[jquery] JQuery: dynamic height() with window resize()

Examples related to jquery

Examples related to html

Examples related to css