Question

Am building a webapp which has a sidebar, and i want sidebar to always be fitted in the viewport like this

and also fit to the viewport when the app in full screen mode.
How can i achieve this with jquery.
I have tried subtracting the height of the header from that of the document

$(document).ready(function() {
        var bodyheight = $('body').height();
        $(".app-sidebar").height(bodyheight);
    });

    // for the window resize
    $(window).resize(function() {
        var bodyheight = $(document).height();
        var header = $('.app-north').innerHeight();
        $(".app-sidebar").height(bodyheight - header);
    });

Answer 1

Why not use css position:fixed and give the sidebar a min-height: 100%. Using jQuery or javascript to size the div on window resize will be very choppy. Anyways, to get the height of the viewport, you should use $(window).height as opposed to document. Here is a function that should work:

var prev,
  const_header_height = $('.app-north').innerHeight(),
  $app_sidebar = $('.app-sidebar'); // get the element first to avoid hitting the DOM each call of resize()

function resize () {
  var curr = $(window).height()
  // only resize if new height is different
  if (curr != prev) {
    $app_sidebar.height(curr - const_header_height);
    prev = curr;
  }
}

$(window).on("resize", resize)
$(document).ready(resize)