我如何获得一个基于div的下拉列表来获得一个滚动条，而不是使用JavaScript和CSS扩展到屏幕的末尾？Struts也参与其中

我有一个动态填充的基于div的下拉列表，当客户在其中放入大量条目时，它会延伸到屏幕的末尾，隐藏较低的条目。它位于一组数据输入行（td元素）中的一列上，因此输入行的可用空间不同

不幸的是，这是一个我继承的应用程序，没有任何帮助，也没有真正需要维护的技能，所以我希望能有点“像我五岁一样解释”。还有，我为文字墙道歉

通过广泛的谷歌搜索和对应用程序中其他代码的检查，我相信OptionCollection可以解决这个特定问题，但我需要启动一个函数，在所选值发生变化时设置其他数据，但还没有找到使用OptionCollection实现这一点的方法

不幸的是，这个东西太大了，无法发布，如果我试图将问题打包成一个独立的包，我可能会把它弄坏，所以下面是我认为相关的代码

潜水艇

<div class="empform">
<html:form action="/processBlank">
<div id="divJobClass" style="visibility: hidden; position: absolute; height="50px"
 border-color: #fff; border-style:solid; border-width: 1px; background: white; opacity: 1">
    <table id="tableJobClass" cellspacing="0" style="border-color: #9090ff; border-style:solid; border-width:1px;" cellpadding="0"> <%

ctr = 0;
for (JobClassVO jc : jcList) { // href="setJC(<%=jc.getGuid()% >, '< %=jc.getJcIdDesc()% >')"  %>
    <tr><td><input style="border: none; background: white"  type="text" 
        id="jc<%=ctr%>" size="50" value="<%=jc.getJcIdDesc()%>" readonly="readonly"
        onclick="setJC(<%=jc.getGuid()%>, '<%=jc.getJcIdDesc()%>', <%=ctr%>)"
        onkeydown='jcListCheck(event);'></td></tr><%
ctr++;
}
%>

单击该字段可触发下拉列表

<td>
        <html:hidden name="erfEmployee" property="jcGUIDString" indexed="true"/>
        <html:text name="erfEmployee" property="jcId" indexed="true"
            size="8" maxlength="25" onblur='<%= "isLastRow('JobClass', " + count + ");" %>'
            onclick='<%= "showJcList(" + count + ");" %>' 
            onkeydown='<%= "jcCheck(event," + count + ");" %>'
            onchange='<%= "verifyHoursClass(" + count + ");" %>' readonly="true" />
</td>

isLastRow、jcCheck和onChange与外观无关。 用于显示div的函数

function showJcList(index) {
    var fld = elem("erfEmployee[" + index + "].erfEeSsnFormatted");
    if (fld.value == "")
        return;
    var div = elem_("divJobClass");
    jcGuidTarget = elem("erfEmployee["+index+"].jcGUIDString");
    jcIdTarget = elem("erfEmployee["+index+"].jcId");
    showList(jcIdTarget, div, jcGuidTarget);
    focusSelected("jc", null, <%=jcList.size()-1%>);
}

function showList(idTarget, div, guidTarget) {
    ddDiv = div;
    if (ddDiv.style.visibility == "visible") {
        ddDiv.style.visibility = "hidden";
        return;
    }
    var iTop = 0, oNode = idTarget, iLeft = 0;
    while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
        iTop += oNode.offsetTop;
        oNode = oNode.offsetParent;
    }
    oNode = idTarget;
    while(oNode.tagName != "BODY" && oNode.tagName != "HTML") {
        iLeft += oNode.offsetLeft;
        oNode = oNode.offsetParent;
    }
    ddDiv.style.left = "" + iLeft + "px";
    ddDiv.style.top = "" + (iTop + idTarget.offsetHeight) + "px";
    ddDiv.style.visibility = "visible";
    ddIdTarget = idTarget;
    ddGuidTarget = guidTarget;
}

函数showJcList（索引）{
var fld=要素（“雇员[“+指数+”]。雇员信息”）；
如果（fld.value==“”）
返回；
var div=elem_（“divJobClass”）；
jcGuidTarget=elem（“erfEmployee[“+index+”].jcGUIDString”）；
jcIdTarget=elem（“雇员[“+索引+”].jcId”）；
展示列表（jcIdTarget、div、jcGuidTarget）；
聚焦选择（“jc”，空，）；
}
函数显示列表（idTarget、div、guidTarget）{
ddDiv=div；
if（ddDiv.style.visibility==“可见”）{
ddDiv.style.visibility=“隐藏”；
返回；
}
var-iTop=0，oNode=idTarget，iLeft=0；
while（oNode.tagName！=“BODY”&&oNode.tagName！=“HTML”）{
iTop+=oNode.offsetTop；
oNode=oNode.offsetParent；
}
oNode=idTarget；
while（oNode.tagName！=“BODY”&&oNode.tagName！=“HTML”）{
iLeft+=oNode.offsetLeft；
oNode=oNode.offsetParent；
}
ddDiv.style.left=“+iLeft+”px”；
ddDiv.style.top=“”+（iTop+idTarget.offsetHeight）+“px”；
ddDiv.style.visibility=“可见”；
ddIdTarget=idTarget；
ddGuidTarget=guidTarget；
}

我搜索的几个网站建议溢出：自动和设置大小，但这似乎没有改变任何事情。也许是我把尺码设置得一团糟？但在我看来，一个固定的大小不会有帮助，因为可用空间取决于正在输入的行。我发现overflow:scroll为我提供了水平和垂直滚动条，但滚动条只是随着div从屏幕末端延伸出来。我曾考虑过要弄清楚还有多少空间，并让div看起来足够高以适合我，但我认为那会很难看。如果有必要，我会去那里

---

如有任何提示、帮助和建议，将不胜感激。谢谢。

这是编写扩展小部件时的常见问题

你只需要

为元件设置所需的

最大高度

设置

overflow-y:auto

以指示其仅在需要时添加滚动条

使用javascript，计算元素的

顶部

位置加上元素的

高度

是否高于视口的

高度（窗口的可见区域）
如果它溢出了，那就做点什么。通常，通常的行为是反转下拉列表的方向，使其从父元素的底部开始，向顶部增长
请看一下使用jQuery制作的（为了方便起见）。调整窗口大小，然后查看溢出元素的情况

或者只运行以下代码段：


$（“.dropdown li”）.on（'mouseenter mouseleave'，函数（e）{
var子菜单=$（'ul:first'，this）；
var submenuTop=submenu.offset（）.top；
var submenuHeight=submenu.height（）；
var viewportHeight=$（窗口）.height（）；
变量IsOverflow=（子菜单顶部+子菜单高度>视口高度）；
if（等溢出）{
css（“top”，$（this）.height（）-子菜单高度）；
}否则{
css子菜单（“顶部”，0）；
}
});
*{
框大小：边框框；
}
身体{
背景：道奇蓝；
}
.下拉列表，
.下拉列表李，
.下拉菜单{
列表样式：无；
保证金：0；
填充：0；
}
.下拉列表{
宽度：100%；
}
.下拉菜单{
位置：绝对位置；
最高：100%；
左：100%；
可见性：隐藏；
显示：无；
z指数：1；
宽度：200px；
最大高度：150像素；
溢出y：自动；
溢出x：隐藏；
}
.下拉列表李{
位置：相对位置；
浮动：左；
明确：两者皆有；
}
.下拉列表李：悬停{
z指数：910；
}
.下拉菜单：悬停，
.下拉列表li:hover>ul，
.下拉列表a:悬停+微升，
.下拉列表a:focus+ul{
能见度：可见；
显示：块；
}
.下载{
显示：块；
背景：#000；
颜色：#fff；
填充：5px20px；
文字装饰：无；
}
李先生{
宽度：100%；
}
.下拉列表李：将鼠标悬停在a上{
背景：#333；
}
.下拉列表李a：聚焦，
.下拉列表李a:悬停{
背景:#666；
}