html - Hide dynamic div when overflow -

basically have div list divs contains images , texts

<div id='item-list' style="height: 700px; overflow: hidden">     <div id='item-1' style="overflow: hidden"> *some images , texts* </div>     <div id='item-2' style="overflow: hidden"> *some images , texts* </div>     <div id='item-3' style="overflow: hidden"> *some images , texts* </div>     ... </div> 

my item-list has static height don't want change. item div added in dynamically whenever user creates item, newest items prepended top of list.

i want hide items whenever item list exceeds height of 700px. try use overflow hidden instead of hiding whole item div, crops item until height limit.

example: have 10 items icons , texts , list contents exceeds height, instead of hiding whole div of item-10, crops item-10 div can see icons not text.

what should if want hide whole of item-10? note every item has different height determined user keys in during item creation.

maybe jquery check heights of individual items. loop on of items , this:

var $totalheight = 0; if( $("#item-x").height() + $totalheight < 700) {      $totalheight += $("#item-x").height();      $("#item-x").show(); } else {      $("#item-x").hide(); } 

essentially, want check height of individual items, , see if adding next item put on 700px. if won't, show item, otherwise, don't.

if wanted fancy, use jquery remove items <div> put on height limit.