jquery - 以间隔展开div高度

Question

我正在使用一个以图案图像作为背景的 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");
});

这似乎可以完成工作!

Answer 1

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

这个 jsFiddle 示例应该不言而喻，间隔当然是用于测试/演示的，就像 css 一样。 http://jsfiddle.net/sg3s/uHsVg/

示例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);

示例 HTML:

<div id="outerDiv">
    <div id="innerContent">Test</div>
</div>

这个扩展的 div 不需要是绝对的或任何东西，它会像任何设置了静态高度的普通 html block 元素一样。

编辑:为了使它缩小，只需删除 treshhold if 语句，我只是把它放在那里，这样它只会在真正的变化上设置高度，而不仅仅是任何 改变...