使用區間擴展div高度

我正在使用具有圖案圖像作爲背景的div。該圖案是可重複的，但優選以像素間隔擴展。使用區間擴展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"); 
});

這似乎是做的工作！

來源

2011-10-18 Christoffer

試試這個CSS：

background-size: cover;

來源

2011-10-18 19:56:18

我看到你的觀點，這種解決方案可以在某些情況下工作，但不是在我的div，因爲我的div可以與100多個像素不同:( – Christoffer

如果該元素具有填充或邊框（如果有的話，你需要考慮的），並沒有經過測試這不起作用。

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); 
    } 
);

它保持檢查是否自動高度已經改變，ceils它到最近的10，並將其設置爲高度。

來源

2011-10-18 20:07:10 Esailija

啊，我明白了，所以你總是希望你的DIV大小爲的倍數10

你應該解僱或調用一個函數時，內容更新，則只需設置的div高度到下一個最大多，是這樣的：

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

你的div將齋要的位置是：絕對的;或者：相對的;爲了高度（）工作。

來源

2011-10-18 20:21:03

嗯..我看到了這個想法，我現在正在嘗試它如果我設置高度div例如83px它將修復它到86而不是如果我設置高度爲85px它將修復它到90 .. 幾乎工作..我只是不知道如何修復它 – Christoffer

糟糕，嘗試'高度'，$（el）.height（）+（10 - $（el）.height（）％10）+'px'）; ％10意味着「mod 10」或「數字的其餘部分除以10」），因此div高度的變化需要10餘數。 –

現有解決方案的問題是，他們沒有考慮到你在div上設置靜態高度，而不管內容是什麼都不會改變。因此，您將需要一個元素來告訴您想要的內容高度，然後wrapping元素將保留背景並根據內部內容中的高度變化進行擴展。

這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塊元素靜態高度設置爲它。

編輯：也使其收縮只是if語句刪除treshhold，我只是把有那麼它只能設置一個真正的變革的高度，而不僅僅是任何變化......

來源

2011-10-18 22:07:26 sg3s

使用區間擴展div高度

回答

相關問題