使用区间扩展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高度

回答

相关问题