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增加高度但不會減少它

回答

相關問題