为什么Chosen Select DropDown位于页脚DIV下面

Question

我有以下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;
}

如果页脚靠近下拉列表，则会剪切它。避免它的唯一方法是使用min-height样式，但它会创建不必要的空白区域。

以下是截图：

如何修改代码，以便下拉列表始终高于任何其他DIV，并且仍然保持周围DIV的流量（不使用absolute位置）

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

HTML来源：

Answer 1

从overflow: hidden移除bodyMainContentHolder。您的容器正在隐藏内部下拉div。

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