100% height div but if content bigger adjust accordingly
===

My website is to be a one page website, with 5 DIV's acting as panels (with a classname as .panel) that fit to stretch the full height and width of the browser window. My below code does this already and works a treat however, I have content that can be larger than the height of .panel/browser window. At the moment this content gets hidden. I.e. The .panel DIV is literally the height of the window and nothing else. I need it to expand if the content within it is larger than the height of the browser window.

How do I edit this code below to do add this functionality? Maybe add a classname to this adjusted DIV so that I can style it accordingly?

    // In my plugins.js file
    function fitElements(){
	var height=$(window).height();
	var width=$(window).width();
	
	$('.panel').css('height',height);
	$('.panel').css('width',width)
    };

    // At the bottom of my HTML file (to call the function)
    jQuery(document).ready(function($) {
        fitElements();
    });

    // My current code also adjusts on browser resize - so would need this answer to do the same
    $(window).resize(function(){	fitElements();    });