javascript - 100% 高度 div 但如果内容更大相应调整

Question

我的网站是一个单页网站，有 5 个 DIV 充当面板（类名为 .panel），适合拉伸浏览器窗口的整个高度和宽度。我下面的代码已经做到了这一点并且可以使用，但是，我的内容可能大于 .panel/browser 窗口的高度。目前，此内容被隐藏。即 .panel DIV 实际上是窗口的高度，仅此而已。如果其中的内容大于浏览器窗口的高度，我需要它来扩展。

如何在下面编辑此代码以添加此功能？也许在这个调整后的 DIV 中添加一个类名，以便我可以相应地设置它的样式？

// 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(fitElements);

Answer 1

更改部分

$('.panel').css('height',height);

至

if (height > $('.panel').height) {
   $('.panel').css('height',height);
}

对于重新调整大小功能添加

$('.panel').css('height','auto'); 

在函数的开头