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

Question

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: https://www.dropbox.com/s/i64vm9pf15kqlo1/Screenshot%202015-02-17%2016.20.46.png?dl=0

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.

Answer 1

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

If you're using jQuery UI's tabs, add this:

$( ".selector" ).on( "tabsactivate", function( event, ui ) { resizeSidebar(); } );

Replacing .selector with what's appropriate for your HTML. Otherwise, you'll need to bind resizeSidebar to the click event of your tabs.