Why does the Chosen Select DropDown goes under the footer DIV

问题

I have the following HTML:

<!-- HEADER CONTENT -->
<div class="bodyMainContentHolder" style="min-height: 750px;">
    <div class="sectionfp group visOverflow">
            <div class="col span_1_of_3_cust span_pad_right">
                <div class="smallPadTop brClear setLeft">
                    <div class="setBold brClear">Select Language:</div>
                    <div class="chosenDDLHolder">
                        <asp:DropDownList ClientIDMode="Static" ID="ddlLanguage" CssClass="chosen-select setProvDDStyle" runat="server" AppendDataBoundItems="true"></asp:DropDownList>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- FOOTER CONTENT -->

CSS:

.chosenDDLHolder {
    width: 100%;
}
.setBold {
    font-weight: bold;
}
.setLeft {
    text-align: left;
}
.brClear {
    clear: both;
}
.smallPadTop {
    padding: 15px 0 0 0;
}
/*  COLUMN SETUP  */
.col {
    display: block;
    /*float:left;*/
    display: inline-block;
    margin: 1% 0 1% 0;
}
.col:first-child {
    margin-left: 0;
}
.span_1_of_3_cust {
    width: 28.2%;
}
.span_pad_right {
    padding-right: 1%;
}
.bodyMainContentHolder {
    width: 98%;
    overflow: hidden; /* tried changing this to "overflow: visible" but didn't work */
    margin: 0 auto;
    padding: 2% 0 2% 0;
}
.sectionfp {
    clear: both;
    padding: 0px;
    margin: 0px;
    height: auto;
    width: 100%;
}
/*  GROUPING  */
.group:before, .group:after {
    content: "";
    display: table;
}
.group:after {
    clear: both;
}
.group {
    zoom: 1; /* For IE 6/7 */
}
.visOverflow {
    overflow: visible;
}

If the footer is close to the dropdownlist, it gets clipped. The only way to avoid it, is to use the min-height style but it creates unnecessary white space.

Here is a screenshot:

How can I modify the code so that the dropdownlist always goes above any other DIV and still stay with the flow of the surrounding DIVs (without using the absolute position)

JSFiddle: http://jsfiddle.net/e62Wu/74/

HTML Source:

回答1:

Remove overflow: hidden from the bodyMainContentHolder. Your container is hiding the inner drop-down div.

http://jsfiddle.net/e62Wu/77/

来源：https://stackoverflow.com/questions/26911397/why-does-the-chosen-select-dropdown-goes-under-the-footer-div