divの高さを間隔で広げます

Question

背景としてパターンイメージを持つdivを使用しています。パターンは繰り返し可能ですが、ピクセルの間隔で拡大することをお勧めします。

固定間隔でdivを展開するソリューションがあるのですが、テキストがdivを埋めていくにつれて展開するソリューションがあるかどうかを知りたいと思います。

パターンが10pxの間隔で最もよく表示されるとします。高さ：120px、130px、140pxなど divは動的コンテンツと一緒に存在し、divの高さが拡大するにつれてその高さは間隔内の次の高さに固定されます。 例divの元の高さは132pxで、自動的に140pxに変換されます。

これは可能ですか？ I私はこれだけではCSSとJavaScript/jQueryのでは不可能であると仮定ので、jqueryのタグを追加したソリューションのための私の推測です:)

SOLUTION：

私は既存の2つの答えのソリューションを組み合わせました：

$(function(){ 
    var DivSize = function(el) { 
     $(el).css('height',Math.ceil($(el).height()/10) * 10+'px'); 
    } 
    DivSize("#test"); 
}); 

これは仕事をするようです！

Answer 1

はこのCSSを試してみてください：

background-size: cover; 

Answer 2

要素は、パディングやボーダーを持っている（それがある場合、あなたはそれらを考慮して必要がある）と、テストされていない場合、これは動作しません。

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にそれをceilsと 高さに設定します。あなたは常にあなたのdivのサイズはの倍数になりたいので

Answer 3

ああ、私は、参照10

あなたは、火災やコンテンツが、その後すぐ隣最大にdivの高さを設定し、更新されたときに関数を呼び出す必要があります複数の場合は次のようになります。

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

div：position：absolute;または：相対;高さ（）が働くために。

Answer 4

既存のソリューションの問題は、コンテンツの内容に関係なく変更されない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は絶対か何かする必要はありません

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

、それは任意の通常のHTMLブロック要素のように動作します静的な高さが設定されています。

編集：また、それはif文だけtreshholdを削除縮小作るために、私はちょうどそれが唯一の真の変化だけではなく、どの変化に高さが設定しますので、入れて...