使用 jQuery 调整动态元素的大小无法正常工作答案

【问题标题】：Resizing dynamic elements with jQuery not working properly使用 jQuery 调整动态元素的大小无法正常工作
【发布时间】：2011-10-23 06:41:57
【问题描述】：

在这里查看我的问题：

http://jsfiddle.net/89sq2/

应该发生的是月份图例应该放在底部。如果您手动调整窗口大小（因为它会触发正确的事件处理程序），就会发生这种情况，但不会在第一页加载时发生。你能找出原因吗？

谢谢！

【问题讨论】：

标签： jquery layout resize height

【解决方案1】：

最后，我找到了一个可行的解决方案。布局完成后手动触发调整大小事件即可。在这里查看，并随时移植更好的代码：

http://jsfiddle.net/89sq2/19/

谢谢大家！

【讨论】：

【解决方案2】：

页脚的高度由你决定，但在你设置页面宽度后它会变宽变短

【讨论】：

在这种情况下你能推荐我做点什么吗？
简单的解决方法是更改设置 wisth/height 的顺序 - jsfiddle.net/nSvgm

【解决方案3】：

这很奇怪..我认为您的 resize 函数有问题..无论出于何种原因，当我调用它一次时它不起作用..两次不会产生完全的结果，但 3 次有效：

$(function() {
  $(document).ready(function() {
    var resize;
    $('.interval-view').wrapInner('<div class="column" />');
    $('.column').wrapInner('<div class="inner-column" />');
    $('#contents, #footers').append('<div class="clearfix"></div>');
    $('.interval-view:even').css('background-color', '#F9F9F9');
    $('.interval-view:odd').css('background-color', '#DDD');
    $('#footers').css('background-color', '#CCC');
    resize = function() {
      $('.column').height($(window).height() - $('#filter-list').outerHeight(true) - $('#footers').outerHeight(true));
      $('#timeline-panel').width($(window).width());
      return $('#timeline-panel .scrollable-area').width("" + ($('.interval-view').length * $('.interval-view').width()) + "px");
    };
    window.onorientationchange = function() {
      return resize();
    };
    $(window).resize(function() {
        console.log("Resizing");
      return resize();
    });

      $(window).resize();
      $(window).resize();
      $(window).resize();
  });
});

我们在手动调整窗口大小时看不到问题，因为在调整大小期间会触发多次事件（想想在调整大小时每次鼠标移动一个像素时都会触发它）。你可以在这里看到它http://jsfiddle.net/89sq2/14/

【讨论】：

奇怪的事情：S。我能做些什么？

【解决方案4】：

看看这个

http://jsfiddle.net/89sq2/8/

【讨论】：