Question

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

我想知道是否有一个解决方案来扩展具有固定间隔的div但仍然随着文本填充div而扩展。

假设最好以10px的间隔查看模式，例如。高度：120px，130px，140px等 div存在动态内容，并且当div的高度扩展时，高度被固定到区间内的下一个可能高度。例如。 div的原始高度为132px，应自动转换为140px。

这可能吗？我已经添加了jquery标签，因为我认为单独使用CSS是不可能的，而javascript / jquery是我猜测的解决方案:)

SOLUTION：

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

$(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将成为位置：绝对;或者：亲属; for height（）工作。

用间隔扩展div高度

4 个答案: