jQuery - 动态 div 高度

Posted 2023-03-06

【中文标题】jQuery - 动态 div 高度

【英文标题】：jQuery - dynamic div height

【发布时间】：2010-11-29 10:21:19

【问题描述】：

我正在尝试在页面加载和窗口调整大小时调整 div 的大小。下面的代码放在</body> 之前，它在页面加载时工作正常，但在调整窗口大小时没有任何作用。我用警报测试了调整大小功能，它在调整大小时触发，但高度保持不变。

<script type='text/javascript'>
    $('#main-content') .css('height': (($(window).height()) - 361)+'px');

    $(window).resize(function()
        $('#main-content') .css('height': (($(window).height()) - 361)+'px');
        alert('resized');
    );
</script>

---

更新：经过长时间的休息，我发现了导致问题的原因。我正在使用 jquery 脚本在正在调整大小的同一 div 上添加样式滚动条。当我将其注释掉时，一切都会调整大小。我已经将滚动条初始化移动到与调整大小相同的函数中，并尝试了我能想到的任何变化......仍然无法让它工作。

（#main-content div 也有 .scroll-pane 类）

<script type='text/javascript'>
$(function()
    $('#main-content').css('height':(($(window).height())-361)+'px');
    $('.scroll-pane').jScrollPane(scrollbarWidth:15, scrollbarMargin:15);

    $(window).resize(function()
          $('#main-content').css('height':(($(window).height())-361)+'px');
    );
);
</script>

【参考方案1】：

请注意，窗口调整大小功能只会在窗口调整大小后触发一次。在调整大小操作期间它不会更新，因此如果您正在拖动窗口边框进行测试，在您松开鼠标按钮之前不会发生任何变化。

另外，请确保您在 $(document).ready() 内执行此操作，如下所示：

<script type='text/javascript'>
$(function()

    $('#main-content') .css('height': (($(window).height()) - 361)+'px');

    $(window).resize(function()
        $('#main-content') .css('height': (($(window).height()) - 361)+'px');
        alert('resized');
    );
);
</script>

这是working demo。

【讨论】：

感谢您澄清主题，但我仍然没有解决问题..当我使用您的代码时，大小调整在加载或调整大小时不起作用。我不知道为什么，因为你的例子很完美！如果您有任何可能干扰的想法，请回复..

@lemon，你在 IE 中测试这个吗？我在 IE 中使用 CSS 高度方法调整 div 大小时遇到​​了问题 - 我认为解决方案是为 div 定义默认高度。

窗口调整大小事件根据浏览器的不同以不同的时间间隔触发。对于（至少是旧版本，根据我的经验）IE，它会触发每个可能的调整大小操作（然后是一些），对于 Firefox，它会根据可用资源限制事件，对于 Safari，它会以大约 100- 的定期间隔一致地触发它们200 毫秒，取决于操作（它类似于 Firefox 的模型，但触发频率要低得多）。

非常感谢。这帮助我摆脱了需要滚动条时发生的水平跳跃。使用这段代码和一点 css，我能够在不强制滚动条的情况下移除水平跳跃。

【参考方案2】：

解决了！

它只需要在计算高度之前移除 jScrollPane，然后重新应用它。

<script type='text/javascript'>
$(function()
    $('.scroll-pane').css('height':(($(window).height())-361)+'px');
    $('#main-content').jScrollPane(scrollbarWidth:15, scrollbarMargin:15);

    $(window).resize(function()
          $('.scroll-pane').jScrollPaneRemove();
          $('#main-content').css('height':(($(window).height())-361)+'px');
          $('.scroll-pane').jScrollPane(scrollbarWidth:15, scrollbarMargin:15);
    );
);
</script>

【讨论】：

嘿，我试图在我的应用程序中为 div 创建动态高度，我使用了你的代码（我刚刚删除了关于滚动窗格的内容）。 :) 不错的解决方案。

Uncaught TypeError: $(...).jScrollPane is not a function ... jScrollPane 是什么？它的插件？

【参考方案3】：

除非文档高度小于或等于窗口高度，否则不要执行函数。

$(function() 
  if($(document).height() <= $(window).height()) 
    $('#wrapper').css( 'height': ($(window).height()) );
    $(window).resize(function()
      $('#wrapper').css( 'height': ($(window).height()) );
    );
  
);

我遇到了内容会流出 div 的问题。