How to stop body contents by displaying the contents of the footer and below

Question

I am using an autocomplete text box, here based on a dynamic value that exceeds the scroll bar, if more than the value shown in the scroll bar in the text box is automatically exceeded on the footer page, and also two scroll bars are displayed. if a larger value is displayed in the text box, the scrollbar should not exceed the content of the footer, displayed only in the body container, and also not show two scrollbars, so please help me with this problem.

Css code:

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

autocomplex code: area data type - array, it contains several values

autocomplete({
    autoFocus : true,
    source : areas,
    selectFirst : true,
    select : function(event, ui) {
};

picture

Answer 1

, , , , .

, CSS relative .ui-autocomplete:

.body-container {
    position: relative;
}

.ui-autocomplete {
    max-height: 100px; /* For example */
}

, . , overflow-y .