以间隔扩大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 块元素一样，设置了静态高度。

编辑：要使其缩小，只需删除treshhold if语句，我只是将其放在那里，这样它只会在真正的更改上设置高度，而不仅仅是任何更改。 ..

Answer 2

试试这个CSS：

background-size: cover;

Answer 3

如果元素具有填充或边框（如果有，您需要考虑这些）并且尚未经过测试，则此方法不起作用。

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 并将其设置为
高度。

Answer 4

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

你应该在内容更新时触发或调用一个函数，然后将 div 高度设置为下一个最大倍数，例如：

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

你的 div 将必须为位置：绝对；或：亲属；让 height() 起作用。