Question

请查看此This Image以获取问题的图片。

我有一个div，它在文本字段下显示一个列表。它是一个假的组合框，使用文本元素和JavaScript。当某人键入时出现的列表应覆盖其他表单元素，但也应该使包装器div更大，以免它被切断。我只能做一个或另一个。

这是相关的HTML

<td id="EditorMainColumn">
   <div id="EditorPanesWrapper">
      <div style="display: block;"><!-- a Jquery Tools Tab, also the problem div -->
           <div class="EditorFormFieldWrapper">
              <label>My Field</label>
              <input class="EditorInput" name="name">
           </div>
           <br class="ClearBoth"><!-- I don't know if this helps or not -->
           <div class="ComboBoxListWrapper">
              <div class="ComboBoxList">
                  <!-- <a> elements are inserted dynamically here --> 
                 <br class="ClearBoth"><!-- I don't know if this helps or not -->
              </div>
           </div>
           <div><!-- Cover me! -->
              You can't see this when the combo box is open...
           </div>
      </div><!-- END display:block div -->
   </div><!-- END EditorPanesWrapper -->
</td>

CSS ：

#EditorMainColumn {
   overflow:hidden!important;
   background:#f9f9f4;
   border-top:1px solid black;
   padding:20px;
   color:#432c01;
}

#EditorPanesWrapper {
   width:auto;
   margin-right:20px;
   overflow:auto;
}

.ComboBoxListWrapper{
position:relative;
top:-10px;
}

.ComboBoxList{
 border: 1px solid red;
 width:288px;
 position:absolute;
 z-index:2;
 margin-left:180px;
}

.ComboBoxList a {
   display:block;
   border: 1px solid #DDD7C6;
   border-top:0px;
   float: left;      
   padding: 8px;
   padding-left:0px;
   top:-11px;
   color: #432C01;
   width:279px;
   font-weight: bold;
   font-size: 10px;
   background:white;
}

如何让div扩展为组合框的高度，同时仍然将选项列表保持在其他表单元素之上/之上？

Answer 1

因为我注意到了这个

EditorPanesWrapper

TD中的

使大小修正，

如果您希望根据页面内容进行调整，请尝试以％为单位指定特定的宽度和高度。

另一个问题为什么你需要将它放入表中？你可以使用div

将元素浮动到其他元素上并向下推动一些元素，但不是所有元素

1 个答案: