間隔間隔擴展div高度

Question

我正在與一個具有圖案圖像作為背景的div一起工作。 該圖案是可重復的，但是優選以像素間隔擴展。

我想知道是否有解決方案以固定間隔擴展div，但仍會隨着文本填充div而擴展。

假設以10px的間隔最佳觀看圖案，例如。 height：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塊元素一樣。

change... 編輯 ：也要使其收縮，只需刪除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將會處於位置：絕對； 或：relative; 為height（）工作。