javascript - 根据标签内内容的高度重新计算容器 div 的高度

Question

我有一个页面，左侧有一个粘性图像边栏，右侧有不同高度的选项卡式内容。 The problem I run into is that the sticky sidebar is overflowing it's container when a shorter tab has been selected.

可以通过单击选项卡 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)，而不是在容器内容更改时更新。您可以使用变通方法，以便每次打开新选项卡时都会触发 window 调整大小事件。换句话说，您可以更改 tabs 插件的初始化:

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

收件人:

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

给你:http://codepen.io/anon/pen/OyYyag