使用jQuery调整动态元素的大小不正常

时间:2011-08-09 14:16:25

标签: jquery layout resize height

在这里查看我的问题:

http://jsfiddle.net/89sq2/

应该发生的是月份传奇应该放在底部。如果您手动调整窗口大小(因为它会触发正确的事件处理程序),但会在第一页加载时不会发生这种情况。你能搞清楚为什么吗?

谢谢!

4 个答案:

答案 0 :(得分:1)

这很奇怪..我认为你的调整大小函数有一个问题..无论出于什么原因,当我调用它时它不起作用。两次不能产生相当的结果但是3次工作:< / p>

$(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/

答案 1 :(得分:0)

您可以确定页脚的高度,但在设置页面宽度

后会变宽和缩短

答案 2 :(得分:0)

答案 3 :(得分:0)

最后,我找到了一个有效的解决方案。在布局完成后手动触发调整大小事件。在这里查看,随意提供更好的代码:

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

谢谢大家!