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的自動完成構件，我相當多的使用它之前，它是相當強勁