jquery - how to stop body content showing over footer content and below -

jquery - how to stop body content showing over footer content and below -

i using autocomplete text box, here based on dynamic value exceed scroll bar ,if more value show in text box scroll bar automatically exceed in footer page , 2 scroll bar displayed. if more value show in text box scroll bar should not exceed footer content,only displayed in body container , not show 2 scroll bar, please help me problem.

css code:

.ui-autocomplete { max-height: 28%; overflow-y: auto; }

autocomplte code : areas info type array , contain multiple values

autocomplete({ autofocus : true, source : areas, selectfirst : true, select : function(event, ui) { };

image

a sample code great in order help, attached image, i'm guessing body container's parent has fixed height while body container has static positioning.

if so, you'll need alter body container's css position relative , assign fixed height .ui-autocomplete class:

.body-container { position: relative; } .ui-autocomplete { max-height: 100px; /* illustration */ }

if remove fixed height body container's parent, sec scrollbar should disappear. if must maintain fixed height, set overflow-y hidden.

jquery html css autocomplete overflow