为什么Chosen Select DropDown会在页脚DIV下进行 [英] Why does the Chosen Select DropDown goes under the footer DIV

问题描述

我有以下HTML：

 <！ -  HEADER CONTENT  - > 
< div class =bodyMainContentHolderstyle =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>选择语言：< / div> 
< div class =chosenDDLHolder> 
< asp：DropDownList ClientIDMode =StaticID =ddlLanguageCssClass =selected-select setProvDDStylerunat =serverAppendDataBoundItems =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; 
保证金：1％0 1％0; 
} 
 .col：第一个孩子{
 margin-left：0; 
} 
 .span_1_of_3_cust {
 width：28.2％; 
} 
 .span_pad_right {
 padding-right：1％; 
} 
 .bodyMainContentHolder {
 width：98％; 
 overflow：hidden; / *尝试将此更改为overflow：visible但无效* / 
 margin：0 auto; 
填充：2％0 2％0; 
} 
 .sectionfp {
 clear：both; 
 padding：0px; 
 margin：0px; 
 height：auto; 
宽度：100％; 
} 
 / * GROUPING * / 
 .group：before，.group：after {
 content：; 
 display：table; 
} 
 .group：在{
 clear：both; 
} 
 .group {
 zoom：1; / *对于IE 6/7 * / 
} 
 .visOverflow {
 overflow：visible; 
} 
  

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

这是一个截图：

如何修改代码，以便下拉列表始终高于其他任何DIV，并始终保持周围DIV的流动状态（不使用绝对位置）

JSFiddle：

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:

解决方案

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

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

这篇关于为什么Chosen Select DropDown会在页脚DIV下进行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！