根据选项卡中内容的高度重新计算容器div的高度

Question

我有一个页面左侧有一个粘性图像侧边栏,右侧有不同高度的标签内容.我遇到的问题是,当选择了较短的标签时,粘性侧边栏会溢出它的容器.

单击选项卡2并向下滚动页面可以观察到此行为.左侧的图像不应溢出到页脚.选项卡1显示正确的行为.

这是一个代码示例:http://codepen.io/anon/pen/gayMjx

  <section class="js-pin-container">
<div class="row">
  <div class="left-col">
    <div class="js-pin-content">
      <img src="http://placehold.it/250x250">
    </div>
  </div>
  <div class="right-col">
    <div id="tabs">
      <ul>
        <li><a href="#tabs-1">tab 1</a></li>
        <li><a href="#tabs-2">tab 2</a></li>
        <li><a href="#tabs-3">tab 3</a></li>
      </ul>
      <div id="tabs-1">
        <p style="background: silver; height: 900px;">This dive is 900px tall.</p>
      </div>
      <div id="tabs-2">
        <p style="background: silver; height: 600px;">This dive is 600px tall.</p>
      </div>
      <div id="tabs-3">
        <p style="background: silver; height: 1200px;">This dive is 1200px tall.</p>
      </div>
    </div>
  </div>
</div>

Answer 1

问题pin只是recalculateLimits在调整窗口大小时更新其limit(),而不是在容器内容发生更改时.您可以使用解决方法,因此每次打开新选项卡时都会window触发调整大小事件.换句话说,您可以tabs从以下位置更改插件的初始化:

$( "#tabs" ).tabs();

至:

$( "#tabs" ).tabs({
  activate:function(){
    $(window).resize();
  }
});

在这里你去:http://codepen.io/anon/pen/OyYyag

Answer 2

按照@piyin 的回答，我建议不要window.resize()每次都引发该事件。

原因是，在现实世界中，您可能有多个附加到此事件的函数，并且您希望避免在每个选项卡开关上调用所有函数。

重新计算高度的更好方法是公开插件方法recalculateLimits并将其附加到activate事件：

工作示例：JSnippet 演示

暴露方法：

     ...
        $window.resize(function () { recalculateLimits(); });
        recalculateLimits();
        //This line expose the method
        this.recalculateLimits = recalculateLimits;
        $window.load(update);

        return this;
    };
})(jQuery);

然后你可以只附加它：

$(function() {

    //Attach pin:
    var pinSide = $(".js-pin-content").pin({
        containerSelector: ".js-pin-container"
    });
    //Create tabs:
    $( "#tabs" ).tabs({
        activate:function(){
            pinSide.recalculateLimits();
        }
    });

});