Dreaded 100% Sidebar Height - jQuery Fix, but another issue arises

So I'm currently coding a UI and it's responsive so the sidebar has to be position: absolute to get 100% height.

I used jQuery to fix the height issue for pages extending further then the original 100% of the page.

Here is the jQuery:

<script>
if (document.documentElement.clientWidth > 959) {
    $(document).ready(function () {
        $(window).resize(function () {
            var bodyheight = $(document).height();
            $(".site-sidebar").height(bodyheight);
        });
        $(window).ready(function () {
            var bodyheight = $(document).height();
            $(".site-sidebar").height(bodyheight);
        });
    });
}
</script>

Now.. The issue is with a page that has tabs and the last tab is longer then the "active" tab so the height isn't be adjusted correctly.. So when you click the last tab theres a white space below the sidebar.

Heres a screenshot of what I mean: http://ift.tt/1CFLJsx

I think I need to adjust the code so that when a tab is clicked, it will "reload" that script. However, my jQuery is limited and don't know how to go about it. Please help :) I will love you forever.