重新计算基础上的内容高度的容器div的高度突

内我有一个在左侧粘性影像侧边栏页和不同高度的正确标签的内容。我遇到的问题是，当选择较短的选项卡时，粘性边栏溢出它的容器。重新计算基础上的内容高度的容器div的高度突

此行为可以通过单击标签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>

来源

2015-11-20 Anthony_Z

我没有注意到您正在描述的行为......我已经使用Chrome和Explorer 11进行了测试。 – Vi100

选择标签2并向下滚动页面。你会看到固定的图像溢出到页脚。 –

我可以发誓，没有。该图像只有250x250，因此它的高度不会超过标签... – Vi100

继@piyin答案，我建议不要提高window.resize()事件每一次。

的原因是，在现实世界中，你可能必须连接到这个事件的几个功能，你想避免调用所有的人都在每个选项卡开关。

重新计算高度将是，以暴露插件方法recalculateLimits并将其附接至所述activate事件的更好的方法：

工作实施例：JSnippet Demo

显露方法：

 ... 
     $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(); 
     } 
    });

}）;

来源

2015-11-28 21:08:52

这是一个很好的解决方案。 –

问题是pin只更新其极限（recalculateLimits）时被调整大小的窗口，而不是当该容器的内容发生变化。您可以使用解决方法，因此每次打开新选项卡时都会触发调整大小事件。

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

要：换句话说，你可以从改变tabs插件的初始化

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

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

来源

2015-11-23 16:16:22 Piyin

重新计算基础上的内容高度的容器div的高度突

回答

相关问题