重新計算基礎上的內容高度的容器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的高度突

回答

相關問題