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

【问题标题】：100% height div but if content bigger adjust accordingly100% 高度 div 但如果内容更大相应调整
【发布时间】：2012-07-30 22:37:08
【问题描述】：

我的网站是一个单页网站，有 5 个 DIV 充当面板（类名为 .panel），适合拉伸浏览器窗口的整个高度和宽度。我下面的代码已经做到了这一点并且可以使用，但是，我的内容可能大于 .panel/browser 窗口的高度。目前，此内容被隐藏。 IE。 .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);

【问题讨论】：

为什么不直接在resize回调中使用函数呢？ $(window).resize(fitElements());
对不起，我不明白你的意思。你能详细说明一下吗？
你在.resize()的回调中使用匿名函数只是为了调用另一个函数。
所以应该是这个代码吧？ $(window).resize(fitElements());
抱歉，应该是$(window).resize(fitElements);。它也可以在匿名函数内部工作，但是当不需要它时，为什么要这样做呢？ :-)

标签： javascript jquery fullscreen

【解决方案1】：

更改部分

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

到

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

为re-size函数添加

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

在函数的开头

【讨论】：

谢谢你，但它似乎破坏了内容小于浏览器高度的面板。这需要是 if else 吗？
这仅适用于网站的“内容小于浏览器高度”