Jquery 用间隔展开div height

我正在使用一个以图案图像为背景的div。该图案是可重复的，但优选以像素间隔扩展

我想知道是否有一种解决方案可以用固定的间隔扩展div，但仍然可以在文本填充div时进行扩展

假设图案最好以10px的间隔观看，例如高度：120px、130px、140px等。 一个div包含动态内容，随着div的高度扩展，该高度将固定到间隔内的下一个可能高度。 div的原始高度为132px，应自动转换为140px

这可能吗？我添加了jquery标记，因为我认为这不可能仅用CSS实现，而javascript/jquery是我猜测的解决方案：）

解决方案：

我结合了两个现有答案的解决方案：

$(function(){
    var DivSize = function(el) {
        $(el).css('height',Math.ceil( $(el).height() / 10 ) * 10+'px');
    }
    DivSize("#test");
});

这似乎很管用

试试这个CSS：

background-size: cover;

---

如果元素有填充或边框（如果有，您需要考虑这些填充或边框）且未经测试，则此操作不起作用

jQuery( document ).ready(
    function(){
    var div = jQuery("#pattern-div"), curHeight = div.height();

    div.css( "height", Math.ceil( curHeight / 10 ) * 10 );

        window.setInterval(
            function(){

            var newHeight = div.height(), roundedHeight;

                if( newHeight !== curHeight ) {
                roundedHeight = Math.ceil( newHeight / 10 ) * 10;
                curHeight = roundedHeight;
                div.css( "height", roundedHeight );
                }

            },
        200 );
    }
);

它不断检查自动高度是否已更改，将其上限设置为最接近的10，并将其设置为

---

高度。

啊，我明白了，所以你总是希望你的div大小是10的倍数

当内容更新时，您应该启动或调用一个函数，然后将div height设置为下一个最大倍数，例如：

function DivSize(el) { 
    $(el).css('height',$(el).height()+(10-$(el).height()%10)+'px');
}

---

您的div将被设置为位置：绝对；或：亲属；使height（）起作用。

现有解决方案的问题在于，它们没有考虑到您在div上设置的静态高度，无论内容是什么，该高度都不会更改。因此，您需要一个元素来告诉您想要的内容高度是多少，然后包装元素保留背景并根据内部内容的高度变化进行扩展

这个JSFIDLE示例本身就说明了这一点，测试/演示的间隔当然和css一样。

示例JS：

setInterval(function() {
    var $inner = $('#innerContent'),
        $outer = $('#outerDiv');

    // Change the contents.... 
    $inner.text($inner.text() + ' lorem ipsum dolor sit amet');

    // Height changed over treshhold? treshhold = outerheight
    if ($outer.height() <= $inner.height()) {
        $outer.height(Math.ceil($inner.height() / 10) * 10);
    }

}, 250);

setInterval（函数（）{
var$inner=$（“#innerContent”），
$outer=$（“#outerDiv”）；
//更改内容。。。。
$inner.text（$inner.text（）+'lorem ipsum dolor sit amet'）；
//在treshhold上改变高度？treshhold=外部高度
如果（$outer.height（），我看到了你的观点，这个解决方案在某些情况下可以工作，但在我的情况下不行，因为我的div可以有超过100个像素的差异：（嗯……我明白了这个想法，我现在正在尝试。如果我将div的高度设置为83px，它会改为86。如果我将高度设置为85px，它会将它改为90。几乎可以工作。我只是不知道如何修复itOops，试试‘height’，$（el）。height（）+（10-$（el）。height（）%10）+‘px’；10表示“mod 10”或“数字的剩余部分除以10”），因此div高度的更改需要为10个余数。
<div id="outerDiv">
    <div id="innerContent">Test</div>
</div>