jQuery - 动态div高度

我想调整页面加载和窗口大小的div。下面的代码位于</body>之前，它在页面加载时工作正常，但在窗口大小调整时不做任何事情。我用一个警报测试了resize函数，这会触发调整大小，但高度保持不变。jQuery - 动态div高度

<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上添加一个样式化的滚动条。当我评论它时，一切正常。我已经调整了与调整大小相同的功能的滚动条初始化，并尝试了任何我能想到的变化..仍然无法实现它的工作。

（＃的主要内容股利也有.scroll窗格类）

<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>

来源

2009-09-18 lemon

解决了！

所有需要的是在计算高度之前删除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>

来源

2009-10-17 10:16:50 lemon

嘿，我试图在我的应用程序中为div创建动态高度，并使用您的代码（我刚刚删除了关于滚动窗格的stuf）。 :)好的解决方案。 – user1080533 2012-01-27 23:42:27

'Uncaught TypeError：$（...）。jScrollPane不是函数'...什么是'jScrollPane'？它的插件？ – KingRider 2017-04-24 12:15:45

注意，窗口大小后的窗口大小调整功能只能触发一次。它在调整大小操作期间不会更新，因此如果您拖动窗口边框来测试此操作，则在释放鼠标按钮之前不会发生任何更改。

此外，请确保你这样做内$(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。

来源

2009-09-18 09:40:49

感谢澄清这个问题，但我仍然没有解决问题。当我使用你的代码时，尺寸调整不适用于加载或调整大小时，。我不知道为什么，因为你的例子完美无缺！如果你有任何想法可能会干扰，请回复.. – lemon 2009-09-25 12:21:33

@lemon，你在IE中测试这个？我遇到过在IE中使用CSS高度方法调整div大小的问题 - 我认为解决方案是为div定义默认高度。 – 2009-09-25 17:03:14

窗口调整大小事件根据浏览器以不同的时间间隔触发。对于Firefox，它会根据可用资源对事件进行限制，对于Safari来说，它会以大约100倍的间隔定期触发它们， 200毫秒，取决于行动（它类似于Firefox的模式，但火灾频率更低）。 – eyelidlessness 2009-10-17 09:12:49

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

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

我有问题，其内容会流到div的外面。

来源

2011-01-24 04:42:28 tnypxl

jQuery - 动态div高度

回答

相关问题