CSS div增加高度但不会减少它

我曾经把这个行为当成一个bug，但是这次我真的希望它是一个功能并且不能生成它。CSS div增加高度但不会减少它

<div style="height: auto;"> 
    <div> 
     Variable Text, which is sometimes longer and sometimes shorter. 
     It changes while runtime. 
    </div> 
</div>

所以我希望这个块自动增加高度，但不会从最大值减少。所以我唯一的想法是使用Jquery，并将每个变化的高度作为最小高度添加。但我确信我之前有过这个。

来源

2017-07-14 Doomenik

我觉得不是一个错误，因为div获取CS中内容的高度，所以是的，我会使用jquery或任何类似的，使 –

我知道它的没有错误，但我有一次在我的代码中这个特殊的行为。但我不能重现它。有一个css的方式来做到这一点，我希望现在有人。 – Doomenik

我不相信这在CSS中是可能的。你可以在元素上设置'min-height'以防止它折叠得更小，然而这在运行时不能被改变而不使用JS。如果您可以给出'div'中的内容示例以及它如何更新的大纲，那么您的问题就会更清晰。 –

在这里你去用一个例子液https://jsfiddle.net/x6otm6x2/

setInterval(function(){ 
 
\t var newHeight = $('div').height() + 100; 
 
\t $('div').css({ 
 
    \t minHeight: newHeight 
 
    }); 
 
    console.log($('div').height()) 
 
}, 1000);

div{ 
 
    min-height: 100px; 
 
    width: 100px; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div> 
 

 
</div>

我觉得这个例子可以帮助你。我已经使用了的setInterval的1000毫秒更新div容器和100px的它的高度增加每次的高度。

我不知道什么时候你会增加容器div的高度，所以我用setInterval。在你的情况下，setInterval将被替换为，某些函数可能是。

来源

2017-07-14 09:12:33 Shiladitya

坦克你，做几乎相同。只是我不会每x秒增加100 px，我会吝啬地将高度变化的最小高度设置为对象的实际高度。无论如何，我的重点是一个纯粹的CSS解决方案。 – Doomenik

CSS div增加高度但不会减少它

回答

相关问题