当DIV的高度由jQuery的浏览器高度定义时，如何根据内容增加DIV的高度？

Posted 2023-03-06

【中文标题】当DIV的高度由jQuery的浏览器高度定义时，如何根据内容增加DIV的高度？

【英文标题】：How to increase height of DIV based on content when height of DIV is defined by browser height with jQuery?

【发布时间】：2013-03-05 07:53:46

【问题描述】：

我正在使用this post 中的 jQuery 代码使我的 DIV 的高度根据浏览器的高度进行调整，它工作得很好。我正在努力调整此代码，以便仅在内容本身不够大时才调整到浏览器的高度。目前，如果 DIV 中的内容自然会高于浏览器的高度，jQuery 代码仍然使 DIV 仅与浏览器窗口一样高，从而切断溢出的内容。

我用来使 DIV 根据浏览器高度调整高度的 jQuery 代码：

$(document).ready(function()
    resizeContent();

    $(window).resize(function() 
        resizeContent();
    );
);

function resizeContent() 
    $height = $(window).height() - 0;
    $('body div.slide').height($height);

如果有人对如何修改代码以防止其切断高于浏览器窗口的内容有任何想法，我将永远感激不尽。

感谢您的帮助！

【问题讨论】：

请显示你的html和css

【参考方案1】：

如果我理解您的问题，您需要做的就是在设置应用窗口高度之前测试 div 的高度：

if ($('body div.slide').height()<=$height) 
  $('body div.slide').height($height);

见 jsfiddle：http://jsfiddle.net/9YQYt/

【讨论】：

感谢回复，但是jsfiddle显示错误，我尝试将代码应用到我的项目时出现同样的错误。

只是为了澄清：根据浏览器高度设置 DIV 高度的 jQuery 代码（如果调整大小，则会更改高度）。但是，如果此 DIV 中的内容大于浏览器的高度，则该 DIV 仍然仅与浏览器一样高，这意味着不会显示超出的内容。如果内容不足以填充它，我想要的是 DIV 仅适合浏览器的高度。如果是，则 DIV 可以比浏览器的高度更大。

您从 jsfiddle 收到什么错误，您使用的是什么浏览器？多余的内容只能通过垂直滚动条显示，显示的jQuery代码不处理窗口大小调整事件。

【参考方案2】：

如果我理解你的问题，你可以用 CSS 解决你的问题

div.slideheight: 100%

【讨论】：

感谢您的回复。我已经尝试过了，但它似乎对问题没有任何影响。我假设 jQuery 代码很简单地覆盖了这个需求，因为它告诉 DIV 不要大于浏览器的高度。

好吧，我误解了这个问题