CODEWITHSUNDEEP
jqueryhtmlcss
Doomenik
Doomenik

Reputation: 866

CSS div increase height but don´t decrease it

I had this behaivour once as a bug but this time I really want it as a feature and can´t produce it.

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

So I want that this block increases its height automaticly but never decreases from the last maximum. So my only idea would be using Jquery and append the height on every change as min-height. But I´m sure I had this before.

Upvotes: 1

Views: 378

Answers (1)

Shiladitya
Shiladitya

Reputation: 12181

Here you go with an example solution https://jsfiddle.net/x6otm6x2/

setInterval(function(){
	var newHeight = $('div').height() + 100;
	$('div').css({
  	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>

I think this example may help you. I have used a setInterval of 1000ms to update the height of the container div and every time it's height increases by 100px.

I don't know when you will increase the container div height so i have used setInterval. In your case setInterval will be replaced by some function may be.

Upvotes: 1

Related Questions