Question

我尝试创建一个有效的搜索框，它会显示一些带有描述的结果，效果很好。但是我创建的自定义下拉列表被底部的父DIV截断。如图所示，弹出窗口在底部被切断。 Image example

下拉列表的代码是：

div.searchResults {
width: 100%;
background-color: rgb(250, 250, 250);
border: 1px solid rgb(237, 237, 237);
border-top: none;
border-bottom-left-radius: 3px;
border-bottom-right-radius: 3px;
position: absolute;
z-index: 900;

当我添加overflow-y：滚动到父级时，我得到以下结果： Image example 2

这里的问题是父母得到一个它不应该的滚动条。但是这样我得到了一个如何运作的例子。我真正想要的是：100% Correct

在过去的3个小时里，我已经尝试了很多东西，但没有弄清楚。更改位置或框大小没有工作，也没有溢出：可见。

感谢您的帮助

这是简化的HTML：

<article class="clearfix">
<div class="entry-content clearfix">
    <form asp-action="add" asp-controller="vacancy" method="post" enctype="multipart/form-data">
        <div class="product-inner">

            <div class="vacancy_save_input_row">
                <p>Requirement</p>
                <div class="picked-requirements">
                    <ul></ul>
                </div>
                <div class="requirement-search">
                    <input id="search_box_requirement" type="text" placeholder="Requirement" @*class="noradiusbottom"*@>
                    <div class="searchResults" style="display:none;">  
                    </div>
                </div>
            </div>
    </form>
</div>
<!-- .entry-content -->

Vacancy_save_input_row具有以下CSS：

.product-inner > .vacancy_save_input_row {
width: 100%;
display: block;
position: relative;
height: auto;
margin-bottom: 10px;

}

条目内容有：

箱的上浆：边界框;

产品内部类有：

min-height: 94px;

CSS绝对定位div溢出内容

0 个答案: