將父div高度設置為不溢出的內容

Question

我的網站上有一個滑塊。

這個jsfiddle描述了它的基本工作方式-

http://jsfiddle.net/6h7q9/15/

我編寫了將父代的高度設置為內容div高度的代碼。 這很好用，直到我介紹了一些沒有固定高度的內容，並且這些高度在頁面上顯示時可能會增加。 有沒有辦法，只要它內部的內容增加或減少它的高度，我就可以動態地更改它的高度。

HTML-

<div id="slider_container">
<div id="slider">
    <div id="slide1">
        Has content that might increase the height of the div....
    </div>
    <div id="slide2">
        Has content that might increase the height of the div....
    </div>
    <div id="slide3">
        Has content that might increase the height of the div....
    </div>    
</div>
</div>
<input type="button" value="Next" id="btnNext">
<input type="button" value="Previous" id="btnPrev">
<input type="button" value="Add text" id="btnAddText">
<div class="footer">
    I appear after the largest container, irrespective of which one is present....
</div>

JavaScript-

var currSlider = 1;
$('#btnNext').click(function(){
    debugger;
    var margin = $('#slider').css('margin-left');   
    if(parseInt(margin) <= -400) {
        return;
    }
    currSlider++;
    // Moving the slider
    $('#slider').css('margin-left', parseInt(margin) - 200 + 'px');    
    // Resetting the height...
    $('#slider').height($('#slide' + currSlider).height());
});
$('#btnPrev').click(function(){
    debugger;
    var margin = $('#slider').css('margin-left');
    if(parseInt(margin) >= 0) {
        return;
    }
    currSlider--;
    // Moving to the previous slider
    $('#slider').css('margin-left', parseInt(margin) + 200 + 'px');
    // Resetting the height...
    $('#slider').height($('#slide' + currSlider).height());

});
$('#btnAddText').click(function() {
    $('#slide' + currSlider).text('Hello World'.repeat(100));
});

String.prototype.repeat = function(times) {
   return (new Array(times + 1)).join(this);
};

Answer 1

我希望這個“答案”能使您朝正確的方向前進。 由於我現在沒有時間充分了解此內容，因此我希望向您發送正確的信息。 如果您確實知道如何正確執行此操作，請向我發送一條消息，因為我真的很想知道^ _ ^

• http://www.w3.org/TR/DOM-Level-3-Events/#legacy-event-types

關於如何使用的一個例子：（ DOMSubtreeModified沒有在IE瀏覽器從我讀為此工作了。 propertchange事件）

$('#slide1').on('DOMSubtreeModified propertychange', function() {
    console.log('test',this);
});

另一種選擇是使用MutationObserver：

• http://updates.html5rocks.com/2012/02/Detect-DOM-changes-with-Mutation-Observers
• https://dvcs.w3.org/hg/domcore/raw-file/tip/Overview.html#mutation-observers

---

2014年6月8日更新15:00 CET

由於我完全誤讀了原始帖子，因此最好的答案毫無用處。 但是由於問題實際上很容易解決（或者……至少我希望我這次能理解這個問題），所以我認為我會發布一種適用於這種情況的答案：一個包含不同高度的滑塊。

原始滑塊有什么問題？ 您將內容移出了容器，這使其隱藏了。 但是，由於容器只有固定的寬度，因此它仍將占據容器的高度。 “ #slider”上的固定高度不會阻止容器從“＃slide- *”中拾取高度。 如果您設置了容器的高度...就可以了:-)

這是隱藏的幻燈片的輪廓，已移出“畫布”： http : //i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png

我沒有通過完成代碼來修復您的小提琴。 我只是重寫了它，以便為您提供易於維護的滑塊。 這是一個帶有工作滑塊的小提琴，您可以在其中添加和刪除幻燈片中的內容： http : //jsfiddle.net/3JL2x/3/

Answer 2

只需刪除.slide1、2和3中的height屬性，然后添加min-height 。 像那樣 ：

#slider > div {
    min-height:200px;
    float:left;
    width : 200px;
}
#slide1 {  
    background-color : red;   
}
#slide2 { 
    background-color: green;    
}
#slide3 {    
    background-color: blue; 
}

現場例子
http://jsfiddle.net/6h7q9/27/