CSS“建议搜索框”不在位置

Question

我为一个网站创建了一个搜索功能，此外我根据他们正在输入的内容创建了一个“建议框”。 （像Google一样！）

所以我的问题是，根据窗口的大小，这个盒子漂浮在位置之外。我如何将它修复到搜索栏的底部？

活生生的例子在这里找到：http://swissinstruments.com/searchresults.php（见顶部的搜索字段中，键入“A”或“c”得到一些建议下来

现在对于我在用的一些代码：

的建议框样式

.suggestion_list 
{ 
z-index:500; 
background: white; 
border: 1px solid #80B6E1; 
padding: 4px; 
float:none; 
margin-top:5px; 
width:191px; 
position:fixed; 
} 

.suggestion_list ul 
{ 
padding: 0; 
margin: 0; 
list-style-type: none; 
} 

.suggestion_list a 
{ 
text-decoration: none; 
color: navy; 
} 

.suggestion_list .selected 
{ 
background: navy; 
color: white; 
} 

.suggestion_list .selected a 
{ 
color: white; 
} 

#autosuggest 
{ 
display: none; 
} 

The SEARCH BOX Style 
#search-form { float:right; padding:9px 0 0 0;} 
#search-form fieldset { 
border:none; 
border:1px solid #0f58a2; 
border-top:none; 
background:#126dbe; 
padding:0 12px 10px 13px; 
float:right 
} 
#search-form input.text { width:190px; border:1px solid #d0e0e6; margin-right:3px;  padding:2px 2px 3px 7px;} 
#search-form input.submit { background:#007cff; width:59px; text-align:center;  height:23px; line-height:23px; color:#fff; font-size:.77em; text-transform:uppercase; border:none; cursor:pointer;} 

最后用来定位DIV JavaScript的一部分。我已经在x设置为-164，因为它似乎为大多数用户所使用的分辨率下工作。但只要我缩小或拉伸它的盒子不在位置

/******************************************************** 
Position the dropdown div below the input text field. 
********************************************************/ 
this.positionDiv = function() 
{ 
    var el = this.elem; 
    var x = -164; 
    var y = el.offsetHeight; 

    //Walk up the DOM and add up all of the offset positions. 
    while (el.offsetParent && el.tagName.toUpperCase() != 'BODY') 
    { 
     x += el.offsetLeft; 
     y += el.offsetTop; 
     el = el.offsetParent; 
    } 

    x += el.offsetLeft; 
    y += el.offsetTop; 

    this.div.style.left = x + 'px'; 
    this.div.style.top = y + 'px'; 
}; 

有什么方法可以使用百分比而不是px吗？

Answer 1

你可以在CSS中使用嵌套div和相对/绝对位置来做到这一点，你不需要javascript来定位下拉列表。

这样的事情应该是齐平的，假设搜索表单没有填充/利润率

#suggest_container { position:relative; overflow:visible; } 
#autosuggest { position:absolute; top:<height-of-search-form>; left:0px; } 

<div id="suggest_container"> 
    <form id="search-form"></form> 
    <div id="autosuggest"></div> 
</div> 

你也总是可以使用jQuery UI的自动完成构件，我相当多的使用它之前，它是相当强劲