为什么选择的选择下拉菜单位于页脚 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

从bodyMainContentHolder 中删除overflow: hidden。您的容器隐藏了内部下拉 div。

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