jQuery的 - 动态的div高度(jQuery - dynamic div height)

我试图调整在页面加载和窗口大小调整一个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一个风格的滚动条。 当我注释掉，一切调整大小正常。 我搬到在相同的功能，调整大小的滚动条初始化，并试图我还是觉得..的任何变化不能得到它的工作。

（该＃主内容的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>

Answer 1:

解决它！

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

Answer 2:

请注意，窗口大小后的窗口大小调整功能只能触发一次。 它的大小调整操作过程中没有及时更新，因此，如果您拖动窗口边框来测试这一点，你让之前松开鼠标按钮的任何更改都不会发生。

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

这里是一个工作演示 。

Answer 3:

除非文档高度小于或等于窗口高度不执行功能。

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

我曾在那里的内容将流动的div之外的问题。

文章来源: jQuery - dynamic div height