将父div高度设置为不溢出的内容

阿比耶特·帕特罗(Abijeet Patro)

我的网站上有一个滑块。

这个jsfiddle描述了它的基本工作方式-

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

我已经编写了将父代的高度设置为内容div的高度的代码。这很好用,直到我介绍了一些没有固定高度的内容,并且在页面上显示该高度时,其高度可能会增加。有没有办法,只要它内部的内容增加或减少它的高度,我就可以动态地更改其父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);
};
DoXicK

我希望这个“答案”能使您朝正确的方向前进。由于我现在没有时间充分了解此内容,因此我希望向您发送正确的信息。如果您确实知道如何正确执行此操作,请向我发送一条消息,因为我真的很想知道^ _ ^

有关如何使用的示例:(DOMSubtreeModified从我读到的内容来看,它在IE中不起作用。因此,该propertchange事件)

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

另一种选择是使用MutationObserver:


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

由于我完全误读了原始帖子,因此最好的答案毫无用处。但是由于这个问题实际上真的很容易解决(或者……至少我希望我这次能理解这个问题),所以我认为我会发布一个适用于这种情况的答案:一个包含不同高度的滑块。

原始滑块有什么问题?您将内容移出了容器,这使其隐藏了。但是,由于容器只有固定的宽度,因此仍会占用容器的高度。“ #slider”上的固定高度不会阻止容器从“#slide- *”中拾取高度。如果您设置了容器的高度...一切都很好:-)

这是隐藏的幻灯片的轮廓,已移出“画布”:http : //i.gyazo.com/f2404e85263a7209907fdbc8f9d8e34e.png

我没有通过完成代码来修复您的小提琴。我只是重写了它,以便为您提供易于维护的滑块。这是一个带有工作滑块的小提琴,您可以在其中添加和删除幻灯片中的内容:http : //jsfiddle.net/3JL2x/3/

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

内容从div溢出,高度为100%

将span元素高度设置为100%时,未将其设置为父Div高度

将viewpager的高度设置为内容的高度

将溢出-x设置为自动时将溢出-y设置为可见,以便内容可以垂直溢出父容器

将浮动div的父级高度设置为使用最小高度的父级的100%,同时仍允许父级展开

使div填充设置高度不包含内容

将父项的高度设置为自动

即使高度设置为100%,内容也会溢出

将按钮的高度和宽度设置为环绕内容并填充父项

如何将父 div 的高度设置为具有位置的子 div:绝对

将内容高度设置为身高的100%

将div的高度与其他带有float的div子元素的父元素的高度设置为100%

将div设置为窗口的100%,而不会出现内容溢出

将高度设置为子 div 以匹配 > Angular 2 中的父级

为父div设置了带有溢出x的位置粘性

将父DIV扩展到溢出的内容宽度

如何在不硬编码任何值的情况下将导航 <div> 的高度设置为与圆 <div> 的高度相同

将div设置为不同的高度?

将div的高度设置为0

将div的高度设置为auto不会根据内容进行调整

如何根据呼吸内容将所有div设置为相同的高度

将 flex 元素的子元素设置为父元素的高度?

将margin-top设置为父元素高度的%

将父容器设置为悬停的子容器的高度

将div的高度设置为等于窗口角度的高度

将div的高度设置为等于图像的高度

将div高度设置为全屏显示高度

将子div垂直对齐到父div的底部,并将子div设置为父高度的百分比

设置父溢出而不破坏子项的粘性